fix length in feed card components

Author: Awakich

projects/social_platform/src/app/office/features/news-card/news-card.component.html

@@ -7,7 +7,9 @@
         [src]="feedItem.imageAddress || placeholderUrl"
         [alt]="feedItem.name"
       />
-      <p class="card__name text-body-10">{{ feedItem.name }}</p>
+      <p class="card__name text-body-10">
+        {{ feedItem.name.length > 30 ? feedItem.name.slice(0, 26) + "..." : feedItem.name }}
+      </p>
     </a>
     @if (isOwner) {
     <div class="card__menu" (clickOutside)="onCloseMenu()">
@@ -28,7 +30,7 @@
   @if (feedItem.text) {
   <div class="card__text text-body-10">
     @if (!editMode) {
-    <p class="text-body-10" #newsTextEl [innerHTML]="feedItem.text | parseLinks"></p>
+    <p class="text-body-10" #newsTextEl [innerHTML]="feedItem.text | parseLinks | parseBreaks"></p>
     } @else { @if (editForm.get("text"); as text) {
     <app-textarea size="big" [formControl]="text | formControl"></app-textarea>
     } }

projects/social_platform/src/app/office/features/news-card/news-card.component.ts

@@ -14,7 +14,13 @@ import { FeedNews } from "@office/projects/models/project-news.model";
 import { SnackbarService } from "@ui/services/snackbar.service";
 import { ActivatedRoute, RouterLink } from "@angular/router";
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
-import { DayjsPipe, FormControlPipe, ParseLinksPipe, ValidationService } from "projects/core";
+import {
+  DayjsPipe,
+  FormControlPipe,
+  ParseBreaksPipe,
+  ParseLinksPipe,
+  ValidationService,
+} from "projects/core";
 import { FileService } from "@core/services/file.service";
 import { nanoid } from "nanoid";
 import { expandElement } from "@utils/expand-element";
@@ -50,6 +56,7 @@ import { ImgCardComponent } from "@office/shared/img-card/img-card.component";
     DayjsPipe,
     FormControlPipe,
     ParseLinksPipe,
+    ParseBreaksPipe,
     CarouselComponent,
     ImgCardComponent,
   ],

projects/social_platform/src/app/office/feed/shared/open-vacancy/open-vacancy.component.html

@@ -17,7 +17,9 @@
         alt="newsItem.name"
       ></app-avatar>
 
-      <p class="text-body-12">{{ project.name }}</p>
+      <p class="text-body-12">
+        {{ project.name.length > 30 ? project.name.slice(0, 26) + "..." : project.name }}
+      </p>
 
       @if (industryService.industries | async; as industries) { @if
       (industryService.getIndustry(industries, project.industry); as industry) {
@@ -29,7 +31,9 @@
     } @if (feedItem; as vacancy) {
     <div class="card__vacancy">
       <div class="lists__section">
-        <h3 class="text-body-10 lists__title">{{ vacancy.role }}</h3>
+        <h3 class="text-body-10 lists__title">
+          {{ vacancy.role.length > 30 ? vacancy.role.slice(0, 26) + "..." : vacancy.role }}
+        </h3>
         <p class="text-body-10">{{ vacancy.datetimeCreated | dayjs: "format":"DD MM YY" }}</p>
       </div>
 
@@ -57,7 +61,7 @@ <h3 class="text-body-10 lists__title">{{ vacancy.role }}</h3>
         </div>
         } @if (skillsLength > 8) {
         <div class="read-more text-body-10" (click)="readFullSkills = !readFullSkills">
-          {{ readFullSkills ? "cкрыть" : "xитать полностью" }}
+          {{ readFullSkills ? "cкрыть" : "подробнее" }}
         </div>
         } }
       </div>

projects/social_platform/src/app/office/feed/shared/open-vacancy/open-vacancy.component.scss

@@ -57,8 +57,9 @@
   }
 
   &__description {
-    overflow-wrap: break-word;
-    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    white-space: wrap;
   }
 
   &__project {