From 95a8969099292ccb22f7517cfa797408da5f6328 Mon Sep 17 00:00:00 2001
From: Fedor <Peter252005@yandex.ru>
Date: Mon, 31 Aug 2026 11:01:29 +0300
Subject: [PATCH] Polish vacancy catalog and profile UI

---
 .../detail/profile-detail-info.service.ts     |  24 +---
 .../ui/profile-detail-ui-info.service.ts      |  27 ++--
 .../ui/projects-detail-ui.service.spec.ts     |  15 +++
 .../detail/ui/projects-detail-ui.service.ts   |   2 +-
 .../vacancy-detail-info.service.spec.ts       |  26 +++-
 .../facades/vacancy-detail-info.service.ts    |   5 +
 .../stage-two/stage-two.component.html        |   3 +-
 .../stage-two/stage-two.component.scss        |   1 +
 .../profile-mid-side.component.html           |  12 +-
 .../profile-mid-side.component.scss           |  29 +----
 .../profile-mid-side.component.spec.ts        | 115 +++++++++++++++++
 .../profile-mid-side.component.ts             |   9 --
 .../profile-right-side.component.html         |   6 +-
 .../profile-right-side.component.scss         |  20 +++
 .../profile-right-side.component.spec.ts      |  51 ++++++++
 .../profile/detail/main/main.component.ts     |  19 +--
 .../ui/pages/profile/edit/edit.component.html |  14 +-
 .../ui/pages/profile/edit/edit.component.scss |  12 ++
 .../pages/profile/edit/edit.component.spec.ts |  42 +++++-
 .../ui/pages/profile/edit/edit.component.ts   |   8 +-
 .../projects-mid-side.component.html          |  13 +-
 .../projects-mid-side.component.scss          |  18 +--
 .../projects-mid-side.component.spec.ts       |  79 ++++++++++++
 .../projects-mid-side.component.ts            |  50 +++++--
 .../projects-right-side.component.html        |   2 +-
 .../projects-right-side.component.scss        |   7 +
 .../task/detail/task-detail.component.html    |  10 +-
 .../task/detail/task-detail.component.scss    |  22 ++--
 .../task/detail/task-detail.component.ts      |   4 +
 .../project-vacancy-step.component.html       |  12 +-
 .../project-vacancy-step.component.scss       |  13 ++
 .../project-vacancy-step.component.ts         |   4 +
 .../vacancies-right-side.component.html       |  12 +-
 .../vacancies-right-side.component.scss       |   7 +
 .../vacancies-right-side.component.ts         |  13 ++
 .../project-vacancy-card.component.html       |  29 +++--
 .../project-vacancy-card.component.scss       |  35 +++++
 .../project-vacancy-card.component.spec.ts    | 122 +++++++++++++++++-
 .../project-vacancy-card.component.ts         |   3 +-
 .../skills-group/skills-group.component.html  |   3 +-
 .../skills-group/skills-group.component.scss  |  15 ++-
 .../skills-group.component.spec.ts            |  83 +++++++++++-
 .../skills-group/skills-group.component.ts    |  10 +-
 .../specializations-group.component.html      |  15 ++-
 .../specializations-group.component.scss      |  15 ++-
 .../specializations-group.component.spec.ts   |  12 +-
 .../vacancy-card/vacancy-card.component.html  |   2 +-
 .../vacancy-card/vacancy-card.component.scss  |  14 +-
 .../vacancy-card.component.spec.ts            |   8 ++
 .../vacancy-card/vacancy-card.component.ts    |   3 +-
 50 files changed, 888 insertions(+), 187 deletions(-)
 create mode 100644 projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.spec.ts
 create mode 100644 projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.spec.ts
 create mode 100644 projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.spec.ts
 create mode 100644 projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.spec.ts

diff --git a/projects/social_platform/src/app/api/profile/facades/detail/profile-detail-info.service.ts b/projects/social_platform/src/app/api/profile/facades/detail/profile-detail-info.service.ts
index 8f96d7770..795cce82b 100644
--- a/projects/social_platform/src/app/api/profile/facades/detail/profile-detail-info.service.ts
+++ b/projects/social_platform/src/app/api/profile/facades/detail/profile-detail-info.service.ts
@@ -1,10 +1,9 @@
 /** @format */
 
-import { DestroyRef, ElementRef, inject, Injectable } from "@angular/core";
-import { concatMap, filter, map, tap } from "rxjs";
+import { DestroyRef, inject, Injectable } from "@angular/core";
+import { filter, map, switchMap, tap } from "rxjs";
 import { ProfileNews } from "@domain/profile/profile-news.model";
 import { ActivatedRoute } from "@angular/router";
-import { ExpandService } from "../../../expand/expand.service";
 import { calculateProfileProgress } from "@utils/calculateProgress";
 import { ProfileDetailUIInfoService } from "./ui/profile-detail-ui-info.service";
 import { NewsInfoService } from "../../../news/news-info.service";
@@ -23,7 +22,6 @@ export class ProfileDetailInfoService {
   private readonly route = inject(ActivatedRoute);
   private readonly destroyRef = inject(DestroyRef);
 
-  private readonly expandService = inject(ExpandService);
   private readonly profileDetailUIInfoService = inject(ProfileDetailUIInfoService);
   private readonly profileInfoService = inject(ProfileInfoService);
   private readonly newsInfoService = inject(NewsInfoService);
@@ -69,16 +67,10 @@ export class ProfileDetailInfoService {
         },
       });
 
-    this.initializationProfileVields();
+    this.initializationProfileFields();
     this.initializationProfileNews();
   }
 
-  initCheckDescription(descEl?: ElementRef): void {
-    setTimeout(() => {
-      this.expandService.checkExpandable("description", !!this.profile()?.personal.aboutMe, descEl);
-    }, 150);
-  }
-
   onAddNews(news: { text: string; files: string[] }) {
     return this.addProfileNewsUseCase.execute(this.route.snapshot.params["id"], news).pipe(
       tap(result => {
@@ -136,16 +128,16 @@ export class ProfileDetailInfoService {
       .subscribe();
   }
 
-  private initializationProfileVields(): void {
+  private initializationProfileFields(): void {
     this.profileDetailUIInfoService.applySetLoggedUserId("logged", this.profile()!.id);
-    this.profileDetailUIInfoService.applyProfileEmpty();
   }
 
-  private initializationProfileNews(descEl?: ElementRef): void {
+  private initializationProfileNews(): void {
     this.route.params
       .pipe(
         map(r => r["id"]),
-        concatMap(userId => this.fetchProfileNewsUseCase.execute(Number(userId))),
+        tap(() => this.newsInfoService.applySetNews({ results: [], count: 0 })),
+        switchMap(userId => this.fetchProfileNewsUseCase.execute(Number(userId))),
         takeUntilDestroyed(this.destroyRef),
       )
       .subscribe(result => {
@@ -157,8 +149,6 @@ export class ProfileDetailInfoService {
           this.setupNewsObserver();
         }, 100);
       });
-
-    this.initCheckDescription(descEl);
   }
 
   private setupNewsObserver(): void {
diff --git a/projects/social_platform/src/app/api/profile/facades/detail/ui/profile-detail-ui-info.service.ts b/projects/social_platform/src/app/api/profile/facades/detail/ui/profile-detail-ui-info.service.ts
index b925f5829..aa76aaf11 100644
--- a/projects/social_platform/src/app/api/profile/facades/detail/ui/profile-detail-ui-info.service.ts
+++ b/projects/social_platform/src/app/api/profile/facades/detail/ui/profile-detail-ui-info.service.ts
@@ -1,6 +1,6 @@
 /** @format */
 
-import { Injectable, signal } from "@angular/core";
+import { computed, Injectable, signal } from "@angular/core";
 import { DirectionItem, directionItemBuilder } from "@utils/directionItemBuilder";
 import { User } from "@domain/auth/user.model";
 
@@ -12,7 +12,18 @@ export class ProfileDetailUIInfoService {
   readonly loggedUserId = signal<number>(0);
   readonly profileId = signal<number>(0); // ID текущего пользователя.
 
-  readonly isProfileEmpty = signal<boolean | undefined>(undefined);
+  readonly isProfileEmpty = computed<boolean | undefined>(() => {
+    const user = this.user();
+    if (!user) return undefined;
+
+    return !(
+      user.firstName &&
+      user.lastName &&
+      user.email &&
+      user.personal.avatar &&
+      user.personal.birthday
+    );
+  });
   readonly isProfileFill = signal<boolean>(false);
 
   readonly directions = signal<DirectionItem[]>([]);
@@ -35,18 +46,6 @@ export class ProfileDetailUIInfoService {
     }
   }
 
-  applyProfileEmpty(): void {
-    this.isProfileEmpty.set(
-      !(
-        this.user()?.firstName &&
-        this.user()?.lastName &&
-        this.user()?.email &&
-        this.user()?.personal.avatar &&
-        this.user()?.personal.birthday
-      ),
-    );
-  }
-
   applySetLoggedUserId(type: "logged" | "profile", profileId: number): void {
     type === "logged" ? this.loggedUserId.set(profileId) : this.profileId.set(profileId);
   }
diff --git a/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.spec.ts b/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.spec.ts
new file mode 100644
index 000000000..bf2095e75
--- /dev/null
+++ b/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.spec.ts
@@ -0,0 +1,15 @@
+/** @format */
+
+import { Project } from "@domain/project/project.model";
+import { ProjectsDetailUIInfoService } from "./projects-detail-ui.service";
+
+describe("ProjectsDetailUIInfoService", () => {
+  it("показывает полное название блока актуальности", () => {
+    const service = new ProjectsDetailUIInfoService();
+    service.applySetProject(Project.default());
+
+    service.applyDirectionItems();
+
+    expect(service.directions()[2].direction).toBe("актуальность");
+  });
+});
diff --git a/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.ts b/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.ts
index c5bca10f1..d52b14808 100644
--- a/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.ts
+++ b/projects/social_platform/src/app/api/project/facades/detail/ui/projects-detail-ui.service.ts
@@ -26,7 +26,7 @@ export class ProjectsDetailUIInfoService {
     this.directions.set(
       directionItemBuilder(
         5,
-        ["проблема", "целевая аудитория", "актуаль-сть", "цели", "партнеры"],
+        ["проблема", "целевая аудитория", "актуальность", "цели", "партнеры"],
         ["key", "smile", "graph", "goal", "team"],
         [
           this.project()!.problem,
diff --git a/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.spec.ts b/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.spec.ts
index 4c887330e..edc450b68 100644
--- a/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.spec.ts
+++ b/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.spec.ts
@@ -29,6 +29,7 @@ describe("VacancyDetailInfoService", () => {
   let downloadCvUseCase: any;
   let fileService: any;
   let snackbar: any;
+  let queryParams$: Subject<Record<string, unknown>>;
 
   beforeEach(() => {
     sendUseCase = { execute: vi.fn() };
@@ -38,6 +39,7 @@ describe("VacancyDetailInfoService", () => {
     downloadCvUseCase = { execute: vi.fn() };
     fileService = { uploadFile: vi.fn() };
     snackbar = { success: vi.fn(), error: vi.fn() };
+    queryParams$ = new Subject<Record<string, unknown>>();
 
     TestBed.configureTestingModule({
       providers: [
@@ -48,7 +50,7 @@ describe("VacancyDetailInfoService", () => {
           provide: ActivatedRoute,
           useValue: {
             data: of({}),
-            queryParams: of({}),
+            queryParams: queryParams$,
             snapshot: { paramMap: { get: () => "10" } },
           },
         },
@@ -110,6 +112,28 @@ describe("VacancyDetailInfoService", () => {
     expect(ui.openModal()).toBe(false);
   });
 
+  it("opens manager responses from a guarded query parameter", () => {
+    ui.vacancy.update(vacancy =>
+      vacancy ? Object.assign(new Vacancy(), vacancy, { canManageResponses: true }) : vacancy,
+    );
+    getResponsesUseCase.execute.mockReturnValue(of(ok([])));
+    service.initializeDetailInfoQueryParams();
+
+    queryParams$.next({ manageResponses: "true" });
+
+    expect(ui.responsesModal()).toBe(true);
+    expect(getResponsesUseCase.execute).toHaveBeenCalledExactlyOnceWith(10);
+  });
+
+  it("does not open or load manager responses without backend permission", () => {
+    service.initializeDetailInfoQueryParams();
+
+    queryParams$.next({ manageResponses: "true" });
+
+    expect(ui.responsesModal()).toBe(false);
+    expect(getResponsesUseCase.execute).not.toHaveBeenCalled();
+  });
+
   it.each([
     [["Вы уже откликнулись на эту вакансию."], "Вы уже откликнулись на эту вакансию"],
     [
diff --git a/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.ts b/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.ts
index e7375c937..66055c9b0 100644
--- a/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.ts
+++ b/projects/social_platform/src/app/api/vacancy/facades/vacancy-detail-info.service.ts
@@ -57,6 +57,11 @@ export class VacancyDetailInfoService {
   initializeDetailInfoQueryParams(): void {
     this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
       next: r => {
+        if (r["manageResponses"] === true || r["manageResponses"] === "true") {
+          this.openVacancyResponses();
+          return;
+        }
+
         this.vacancyDetailUIInfoService.applyNoResponseOpenModal(r);
       },
     });
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.html b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.html
index 7e70ab5cb..3271d9fd4 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.html
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.html
@@ -83,7 +83,8 @@ <h4 class="text-heading-4">библиотека</h4>
                 [title]="skillGroup.name"
                 [options]="skillGroup.skills"
                 [selected]="stageForm.getRawValue().skills"
-                [disabled]="isSkillGroupDisabled(skillGroup.name)"
+                [hasOpenGroups]="hasOpenSkillsGroups()"
+                [isOpen]="openSkillGroup() === skillGroup.name"
                 (groupToggled)="onSkillGroupToggled($event, skillGroup.name)"
                 (optionToggled)="onOptionToggled($event)"
               ></app-skills-group>
diff --git a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss
index 570802ea9..66887b7d2 100644
--- a/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss
+++ b/projects/social_platform/src/app/ui/pages/onboarding/stage-two/stage-two.component.scss
@@ -137,6 +137,7 @@
   }
 
   &__skills-groups {
+    position: relative;
     height: 100%;
     overflow: auto;
     scrollbar-width: thin;
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.html b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.html
index 22e26bff2..cf5fad45e 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.html
@@ -10,15 +10,7 @@ <h3 class="text-body-12 about__title">обо мне</h3>
         </div>
 
         <div class="text-body-10 about__text">
-          <p #descEl [innerHTML]="about | parseLinks | parseBreaks"></p>
-          @if (descriptionExpandable()) {
-            <div
-              class="read-more text-body-10"
-              (click)="onExpandDescription(descEl, 'expanded', readFullDescription())"
-            >
-              {{ readFullDescription() ? "скрыть" : "подробнее" }}
-            </div>
-          }
+          <p [innerHTML]="about | parseLinks | parseBreaks"></p>
         </div>
       </div>
     }
@@ -37,7 +29,7 @@ <h3 class="text-body-12 about__title">обо мне</h3>
     }
     @if (isProfileEmpty()) {
       @if (loggedUserId() === user()!.id) {
-        <div class="profile__empty">
+        <div class="profile__empty" data-testid="empty-profile-state">
           <i appIcon icon="empty-chat" appSquare="44"></i>
           <p class="profile__empty--text text-body-12">
             заполните профиль и начните пользоваться PROCOLLAB
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.scss
index 191b34566..1d913f7d4 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.scss
@@ -32,6 +32,10 @@
     flex-direction: column;
     gap: 24px;
     align-items: center;
+    justify-content: center;
+    min-height: min(480px, calc(100vh - 240px));
+    padding: 24px;
+    text-align: center;
 
     &--text {
       color: var(--grey-for-text);
@@ -64,21 +68,11 @@
     margin-bottom: 8px;
     color: var(--accent);
   }
-  /* stylelint-disable value-no-vendor-prefix */
+
   &__text {
     p {
-      display: -webkit-box;
-      overflow: hidden;
       color: var(--black);
-      text-overflow: ellipsis;
       word-break: break-word;
-      transition: all 0.7s ease-in-out;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 5;
-
-      &.expanded {
-        -webkit-line-clamp: unset;
-      }
     }
 
     ::ng-deep a {
@@ -94,8 +88,6 @@
     }
   }
 
-  /* stylelint-enable value-no-vendor-prefix */
-
   &__read-full {
     margin-top: 2px;
     color: var(--accent);
@@ -114,14 +106,3 @@
     margin-top: 20px;
   }
 }
-
-.read-more {
-  margin-top: 12px;
-  color: var(--accent);
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    color: var(--accent-dark);
-  }
-}
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.spec.ts b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.spec.ts
new file mode 100644
index 000000000..b18f99d2b
--- /dev/null
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.spec.ts
@@ -0,0 +1,115 @@
+/** @format */
+
+import { signal } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { FileService, ValidationService } from "@corelib";
+import { NewsInfoService } from "@api/news/news-info.service";
+import { ProfileDetailInfoService } from "@api/profile/facades/detail/profile-detail-info.service";
+import { ProfileDetailUIInfoService } from "@api/profile/facades/detail/ui/profile-detail-ui-info.service";
+import { User } from "@domain/auth/user.model";
+import { ProfileMidSideComponent } from "./profile-mid-side.component";
+
+describe("ProfileMidSideComponent", () => {
+  let fixture: ComponentFixture<ProfileMidSideComponent>;
+  let ui: ProfileDetailUIInfoService;
+
+  const createUser = (id: number, filled: boolean, aboutMe = ""): User =>
+    ({
+      id,
+      firstName: filled ? "Анна" : "",
+      lastName: filled ? "Иванова" : "",
+      email: filled ? "anna@example.test" : "",
+      personal: {
+        aboutMe,
+        avatar: filled ? "https://example.test/avatar.png" : "",
+        birthday: filled ? "2000-01-01" : null,
+      },
+      relations: {
+        progress: filled ? 100 : 0,
+        profileFillPromptAcknowledgedAt: null,
+        skills: [],
+        achievements: [],
+      },
+    }) as unknown as User;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileMidSideComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: ProfileDetailInfoService,
+          useValue: {
+            onAddNews: vi.fn(),
+            onDeleteNews: vi.fn(),
+            onLike: vi.fn(),
+            onEditNews: vi.fn(),
+            onNewsInView: vi.fn(),
+          },
+        },
+        { provide: NewsInfoService, useValue: { news: signal([]) } },
+        ProfileDetailUIInfoService,
+        { provide: ValidationService, useValue: { getFormValidation: vi.fn() } },
+        { provide: FileService, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProfileMidSideComponent);
+    ui = TestBed.inject(ProfileDetailUIInfoService);
+    const user = createUser(7, false);
+    ui.applySetLoggedUserId("logged", 7);
+    ui.applyInitProfile({ data: { user } }, 7);
+    fixture.componentRef.setInput("user", user);
+    fixture.detectChanges();
+  });
+
+  it("показывает центрируемый empty state владельцу пустого профиля", () => {
+    const emptyState = fixture.nativeElement.querySelector(
+      '[data-testid="empty-profile-state"]',
+    ) as HTMLElement;
+
+    expect(emptyState).toBeTruthy();
+    expect(emptyState.textContent).toContain("заполните профиль и начните пользоваться PROCOLLAB");
+  });
+
+  it("does not leak empty state across foreign and own profile navigation", () => {
+    const foreignEmpty = createUser(20, false);
+    const ownFilled = createUser(10, true, "Заполненный профиль");
+    ui.applySetLoggedUserId("logged", 10);
+
+    ui.applyInitProfile({ data: { user: foreignEmpty } }, 10);
+    fixture.componentRef.setInput("user", foreignEmpty);
+    fixture.detectChanges();
+    expect(ui.isProfileEmpty()).toBe(true);
+    expect(fixture.nativeElement.querySelector('[data-testid="empty-profile-state"]')).toBeFalsy();
+
+    ui.applyInitProfile({ data: { user: ownFilled } }, 10);
+    fixture.componentRef.setInput("user", ownFilled);
+    fixture.detectChanges();
+    expect(ui.isProfileEmpty()).toBe(false);
+    expect(fixture.nativeElement.querySelector('[data-testid="empty-profile-state"]')).toBeFalsy();
+    expect(fixture.nativeElement.querySelector("app-news-form")).toBeTruthy();
+
+    ui.applyInitProfile({ data: { user: foreignEmpty } }, 10);
+    fixture.componentRef.setInput("user", foreignEmpty);
+    fixture.detectChanges();
+    ui.applyInitProfile({ data: { user: ownFilled } }, 10);
+    fixture.componentRef.setInput("user", ownFilled);
+    fixture.detectChanges();
+
+    expect(ui.isProfileEmpty()).toBe(false);
+    expect(fixture.nativeElement.querySelector("app-news-form")).toBeTruthy();
+  });
+
+  it("shows the full 300-character about me text without expansion control", () => {
+    const aboutMe = "Я".repeat(300);
+    const user = createUser(7, true, aboutMe);
+    ui.applyInitProfile({ data: { user } }, 7);
+    fixture.componentRef.setInput("user", user);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(".about__text p").textContent).toBe(aboutMe);
+    expect(fixture.nativeElement.querySelector(".about .read-more")).toBeFalsy();
+  });
+});
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.ts b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.ts
index 3155ad594..433173061 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-mid-side/profile-mid-side.component.ts
@@ -18,7 +18,6 @@ import { IconComponent, ButtonComponent } from "@ui/primitives";
 import { NewsCardComponent } from "@ui/widgets/news-card/news-card.component";
 import { NewsFormComponent } from "@ui/widgets/news-form/news-form.component";
 import { ProjectDirectionCard } from "@ui/widgets/project-direction-card/project-direction-card.component";
-import { ExpandService } from "@api/expand/expand.service";
 import { NewsInfoService } from "@api/news/news-info.service";
 import { ProfileDetailInfoService } from "@api/profile/facades/detail/profile-detail-info.service";
 import { ProfileDetailUIInfoService } from "@api/profile/facades/detail/ui/profile-detail-ui-info.service";
@@ -53,7 +52,6 @@ export class ProfileMidSideComponent {
   private readonly profileDetailInfoService = inject(ProfileDetailInfoService);
   private readonly profileDetailUIInfoService = inject(ProfileDetailUIInfoService);
   private readonly newsInfoService = inject(NewsInfoService);
-  private readonly expandService = inject(ExpandService);
 
   protected readonly loggedUserId = this.profileDetailUIInfoService.loggedUserId;
   protected readonly isProfileEmpty = this.profileDetailUIInfoService.isProfileEmpty;
@@ -63,9 +61,6 @@ export class ProfileMidSideComponent {
 
   protected readonly newsPending = signal(false);
 
-  protected readonly descriptionExpandable = this.expandService.descriptionExpandable;
-  protected readonly readFullDescription = this.expandService.readFullDescription;
-
   private readonly destroyRef$ = inject(DestroyRef);
 
   protected readonly AppRoutes = AppRoutes;
@@ -103,8 +98,4 @@ export class ProfileMidSideComponent {
   onNewsInView(entries: IntersectionObserverEntry[]): void {
     this.profileDetailInfoService.onNewsInView(entries);
   }
-
-  onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    this.expandService.onExpand("description", elem, expandedClass, isExpanded);
-  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.html b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.html
index 302f1b1ee..12930f5bb 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.html
@@ -31,7 +31,7 @@ <h3 class="text-body-12 lists__title">контакты</h3>
           @if (link | userLinks; as l) {
             <a class="lists__item" style="color: var(--black)" target="_blank" [href]="link">
               <i class="lists__icon" appIcon [icon]="l.iconName" appSquare="10"></i>
-              <span>{{ l.tag | truncate: 30 }}</span>
+              <span class="lists__contact">{{ l.tag }}</span>
             </a>
           }
         </ng-template>
@@ -217,8 +217,8 @@ <h3 class="text-body-12 lists__title">проекты</h3>
               height="30"
             />
             <div class="lists__info">
-              <p class="text-body-10 lists__item" style="color: var(--black)">
-                {{ project.name | truncate: 30 }}
+              <p class="text-body-10 lists__project-name">
+                {{ project.name }}
               </p>
               <span class="text-body-6 lists__item">{{ project.collaborator?.role }}</span>
             </div>
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
index 3f4226437..8167e755c 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.scss
@@ -31,6 +31,7 @@
   &__right {
     display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
   &__aside {
@@ -92,6 +93,7 @@
   &__info {
     display: flex;
     flex-direction: column;
+    min-width: 0;
 
     &--text {
       color: var(--black) !important;
@@ -110,6 +112,17 @@
     }
   }
 
+  /* stylelint-disable value-no-vendor-prefix */
+  &__project-name {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--black);
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  /* stylelint-enable value-no-vendor-prefix */
+
   &__date {
     display: flex;
     flex-direction: column;
@@ -125,6 +138,7 @@
     display: flex;
     gap: 6px;
     align-items: center;
+    min-width: 0;
     color: var(--grey-for-text);
 
     &--status {
@@ -164,6 +178,12 @@
     }
   }
 
+  &__contact {
+    min-width: 0;
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
+
   @include expandable-list;
 }
 
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.spec.ts b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.spec.ts
new file mode 100644
index 000000000..2dc76fef7
--- /dev/null
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-right-side/profile-right-side.component.spec.ts
@@ -0,0 +1,51 @@
+/** @format */
+
+import { signal } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { ExpandService } from "@api/expand/expand.service";
+import { ProfileDetailUIInfoService } from "@api/profile/facades/detail/ui/profile-detail-ui-info.service";
+import { User } from "@domain/auth/user.model";
+import { ProfileRightSideComponent } from "./profile-right-side.component";
+
+describe("ProfileRightSideComponent", () => {
+  let fixture: ComponentFixture<ProfileRightSideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileRightSideComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: ExpandService,
+          useValue: { readAll: signal({}), toggleReadAll: vi.fn() },
+        },
+        {
+          provide: ProfileDetailUIInfoService,
+          useValue: { isShowModal: signal(false), applyOpenWorkInfoModal: vi.fn() },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProfileRightSideComponent);
+  });
+
+  it("keeps the complete long project title in the profile project list DOM", () => {
+    const projectName = "Очень длинное название проекта без жесткого символьного обрезания";
+    fixture.componentRef.setInput("user", {
+      personal: { links: [] },
+      relations: {
+        education: [],
+        workExperience: [],
+        projects: [
+          { id: 1, name: projectName, imageAddress: "", collaborator: { role: "Участник" } },
+        ],
+      },
+    } as unknown as User);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(".lists__project-name").textContent.trim()).toBe(
+      projectName,
+    );
+  });
+});
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/main.component.ts b/projects/social_platform/src/app/ui/pages/profile/detail/main/main.component.ts
index 00adf03ba..88f48ec19 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/main.component.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/main.component.ts
@@ -1,15 +1,6 @@
 /** @format */
 
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  inject,
-  OnDestroy,
-  OnInit,
-  viewChild,
-} from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, OnDestroy, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { ProfileDetailInfoService } from "@api/profile/facades/detail/profile-detail-info.service";
 import { ProfileDetailUIInfoService } from "@api/profile/facades/detail/ui/profile-detail-ui-info.service";
@@ -32,9 +23,7 @@ import { ProfileMidSideComponent } from "./components/profile-mid-side/profile-m
   providers: [ProfileDetailInfoService, ProfileDetailUIInfoService, ExpandService],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProfileMainComponent implements OnInit, AfterViewInit, OnDestroy {
-  readonly descEl = viewChild<ElementRef | undefined>("descEl");
-
+export class ProfileMainComponent implements OnInit, OnDestroy {
   private readonly profileDetailInfoService = inject(ProfileDetailInfoService);
   private readonly profileDetailUIInfoService = inject(ProfileDetailUIInfoService);
 
@@ -44,10 +33,6 @@ export class ProfileMainComponent implements OnInit, AfterViewInit, OnDestroy {
     this.profileDetailInfoService.initializationProfile();
   }
 
-  ngAfterViewInit(): void {
-    this.profileDetailInfoService.initCheckDescription(this.descEl());
-  }
-
   ngOnDestroy(): void {
     this.profileDetailInfoService.destroy();
   }
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
index 83fb1e96b..4ac7cece1 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.html
@@ -189,8 +189,16 @@ <h4 class="text-heading-4">Выберите специальность</h4>
 }
 
 @defer (when skillsGroupsModalOpen()) {
-  <app-modal [open]="skillsGroupsModalOpen()" class="modal">
+  <app-modal [open]="skillsGroupsModalOpen()" (openChange)="closeSkillsGroupsModal()" class="modal">
     <div class="modal__wrapper">
+      <button
+        type="button"
+        class="modal__close"
+        aria-label="Закрыть библиотеку навыков"
+        (click)="closeSkillsGroupsModal()"
+      >
+        <i appIcon icon="cross" appSquare="12"></i>
+      </button>
       <h4 class="text-heading-4">библиотека навыков</h4>
       <div class="modal__content">
         <div class="modal__skills-groups">
@@ -201,8 +209,8 @@ <h4 class="text-heading-4">библиотека навыков</h4>
                   [title]="skillsGroup.name"
                   [options]="skillsGroup.skills"
                   [selected]="this.profileForm.getRawValue().skills"
-                  [disabled]="isGroupDisabled(skillsGroup.id)"
-                  [hasOpenGroups]="openGroupIndex !== null"
+                  [hasOpenGroups]="openGroupIndex() !== null"
+                  [isOpen]="openGroupIndex() === skillsGroup.id"
                   (optionToggled)="onToggleSkill($event)"
                   (groupToggled)="onGroupToggled(skillsGroup.id, $event)"
                 ></app-skills-group>
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
index 58a21e46b..b16f53f4d 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.scss
@@ -322,6 +322,7 @@
 
 .modal {
   &__wrapper {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -329,6 +330,17 @@
     width: 672px;
   }
 
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 8px;
+    color: var(--black);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.spec.ts b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.spec.ts
index 8c9a92764..8eec425ad 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.spec.ts
@@ -2,7 +2,7 @@
 
 /** @format */
 
-import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ComponentFixture, DeferBlockState, TestBed } from "@angular/core/testing";
 
 import { ProfileEditComponent } from "./edit.component";
 import { of } from "rxjs";
@@ -72,4 +72,44 @@ describe("ProfileEditComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("closes the skills library with the explicit close button", async () => {
+    component.toggleSkillsGroupsModal();
+    fixture.detectChanges();
+    for (const block of await fixture.getDeferBlocks()) {
+      await block.render(DeferBlockState.Complete);
+    }
+    await new Promise(resolve => setTimeout(resolve, 10));
+    fixture.detectChanges();
+
+    const closeButton = document.querySelector(
+      'button[aria-label="Закрыть библиотеку навыков"]',
+    ) as HTMLButtonElement;
+    expect(closeButton).toBeTruthy();
+
+    closeButton.click();
+    fixture.detectChanges();
+    await new Promise(resolve => setTimeout(resolve, 10));
+
+    expect((component as any).skillsGroupsModalOpen()).toBe(false);
+  });
+
+  it("closes the skills library through the modal backdrop", async () => {
+    component.toggleSkillsGroupsModal();
+    fixture.detectChanges();
+    for (const block of await fixture.getDeferBlocks()) {
+      await block.render(DeferBlockState.Complete);
+    }
+    await new Promise(resolve => setTimeout(resolve, 10));
+    fixture.detectChanges();
+
+    const backdrop = document.querySelector(".modal__overlay") as HTMLElement;
+    expect(backdrop).toBeTruthy();
+
+    backdrop.click();
+    fixture.detectChanges();
+    await new Promise(resolve => setTimeout(resolve, 10));
+
+    expect((component as any).skillsGroupsModalOpen()).toBe(false);
+  });
 });
diff --git a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
index ae4d9a3c7..c1d5a5f5b 100644
--- a/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
+++ b/projects/social_platform/src/app/ui/pages/profile/edit/edit.component.ts
@@ -144,10 +144,6 @@ export class ProfileEditComponent implements OnInit, AfterViewInit {
     this.profileEditInfoService.onGroupToggled(index, isOpen);
   }
 
-  isGroupDisabled(index: number): boolean {
-    return this.profileEditInfoService.isGroupDisabled(index);
-  }
-
   protected readonly isModalErrorSkillsChoose =
     this.profileEditInfoService.isModalErrorSkillsChoose;
 
@@ -263,6 +259,10 @@ export class ProfileEditComponent implements OnInit, AfterViewInit {
     this.skillsGroupsModalOpen.update(open => !open);
   }
 
+  closeSkillsGroupsModal(): void {
+    this.skillsGroupsModalOpen.set(false);
+  }
+
   toggleSpecsGroupsModal(): void {
     this.specsGroupsModalOpen.update(open => !open);
   }
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html
index 92e180a7d..f7ead19b7 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.html
@@ -6,16 +6,13 @@
       <h3 class="text-body-12 about__title">о проекте</h3>
       <i appIcon icon="folder" appSquare="12" class="about__head--icon"></i>
     </div>
-    @if (project()!.description) {
+    @if (fullDescription()) {
       <div class="text-body-10 about__text">
-        <p #descEl [innerHTML]="project()!.description | parseLinks | parseBreaks"></p>
+        <p [innerHTML]="visibleDescription() | parseLinks | parseBreaks"></p>
         @if (descriptionExpandable()) {
-          <div
-            class="read-more text-body-10"
-            (click)="onExpandDescription(descEl, 'expanded', readFullDescription())"
-          >
-            {{ readFullDescription() ? "скрыть" : "подробнее" }}
-          </div>
+          <button type="button" class="read-more text-body-10" (click)="onToggleDescription()">
+            {{ descriptionExpanded() ? "Скрыть" : "Подробнее" }}
+          </button>
         }
       </div>
     }
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.scss
index bca329b78..11b2db773 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.scss
@@ -48,23 +48,12 @@
     margin-bottom: 8px;
     color: var(--accent);
   }
-  /* stylelint-disable value-no-vendor-prefix */
+
   &__text {
     p {
-      display: -webkit-box;
-      overflow: hidden;
       line-height: 1.5;
       color: var(--black);
-      text-overflow: ellipsis;
       word-break: break-word;
-      transition: all 0.7s ease-in-out;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 5;
-
-      &.expanded {
-        display: block;
-        -webkit-line-clamp: unset;
-      }
     }
 
     ::ng-deep a {
@@ -80,8 +69,6 @@
     }
   }
 
-  /* stylelint-enable value-no-vendor-prefix */
-
   &__read-full {
     margin-top: 2px;
     color: var(--accent);
@@ -102,9 +89,12 @@
 }
 
 .read-more {
+  padding: 0;
   margin-top: 12px;
   color: var(--accent);
   cursor: pointer;
+  background: transparent;
+  border: 0;
   transition: color 0.2s;
 
   &:hover {
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.spec.ts b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.spec.ts
new file mode 100644
index 000000000..0e38fe884
--- /dev/null
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.spec.ts
@@ -0,0 +1,79 @@
+/** @format */
+
+import {
+  buildProjectDescriptionPreview,
+  ProjectsMidSideComponent,
+} from "./projects-mid-side.component";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { ProjectsDetailService } from "@api/project/facades/detail/projects-detail.service";
+import { NewsInfoService } from "@api/news/news-info.service";
+import { ProjectsDetailUIInfoService } from "@api/project/facades/detail/ui/projects-detail-ui.service";
+import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
+import { signal } from "@angular/core";
+import { Project } from "@domain/project/project.model";
+
+describe("buildProjectDescriptionPreview", () => {
+  it("не обрезает короткое описание", () => {
+    expect(buildProjectDescriptionPreview("Короткое описание.", 100)).toBe("Короткое описание.");
+  });
+
+  it("обрезает длинное описание по границе целого предложения", () => {
+    const description =
+      "Первое законченное предложение. Второе законченное предложение. Третье предложение продолжается.";
+
+    expect(buildProjectDescriptionPreview(description, 70)).toBe(
+      "Первое законченное предложение. Второе законченное предложение.",
+    );
+  });
+
+  it("использует границу слова и многоточие, если законченного предложения нет", () => {
+    expect(buildProjectDescriptionPreview("Очень длинное описание без знаков завершения", 28)).toBe(
+      "Очень длинное описание без…",
+    );
+  });
+});
+
+describe("ProjectsMidSideComponent", () => {
+  let fixture: ComponentFixture<ProjectsMidSideComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectsMidSideComponent],
+      providers: [
+        { provide: NewsInfoService, useValue: { news: signal([]) } },
+        { provide: ProjectsDetailUIInfoService, useValue: { directions: signal([]) } },
+        { provide: ProfileInfoService, useValue: { profile: signal(undefined) } },
+      ],
+    })
+      .overrideComponent(ProjectsMidSideComponent, {
+        remove: { providers: [ProjectsDetailService] },
+        add: { providers: [{ provide: ProjectsDetailService, useValue: {} }] },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ProjectsMidSideComponent);
+  });
+
+  it("shows the complete project description after expansion", () => {
+    const tail = "УНИКАЛЬНЫЙ ФИНАЛ ОПИСАНИЯ";
+    const description = `${"Длинное описание проекта без завершения. ".repeat(20)}${tail}`;
+    fixture.componentRef.setInput("project", { id: 1, description } as Project);
+    fixture.detectChanges();
+
+    const paragraph = fixture.nativeElement.querySelector(".about__text p") as HTMLElement;
+    const button = fixture.nativeElement.querySelector(".read-more") as HTMLButtonElement;
+    expect(paragraph.textContent).not.toContain(tail);
+    expect(button.textContent).toContain("Подробнее");
+
+    button.click();
+    fixture.detectChanges();
+
+    expect(paragraph.textContent).toContain(tail);
+    expect(button.textContent).toContain("Скрыть");
+
+    button.click();
+    fixture.detectChanges();
+    expect(paragraph.textContent).not.toContain(tail);
+    expect(button.textContent).toContain("Подробнее");
+  });
+});
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts
index b914828fa..48cf50ba1 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-mid-side/projects-mid-side.component.ts
@@ -4,6 +4,7 @@ import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   DestroyRef,
   ElementRef,
   inject,
@@ -16,7 +17,6 @@ import { ProjectDirectionCard } from "@ui/widgets/project-direction-card/project
 import { NewsCardComponent } from "@ui/widgets/news-card/news-card.component";
 import { NewsInfoService } from "@api/news/news-info.service";
 import { ProjectsDetailUIInfoService } from "@api/project/facades/detail/ui/projects-detail-ui.service";
-import { ExpandService } from "@api/expand/expand.service";
 import { Project } from "@domain/project/project.model";
 import { AppRoutes } from "@api/paths/app-routes";
 import { ProjectsDetailService } from "@api/project/facades/detail/projects-detail.service";
@@ -27,6 +27,34 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { finalize } from "rxjs";
 import { ProfileInfoService } from "@api/profile/facades/profile-info.service";
 
+const PROJECT_DESCRIPTION_PREVIEW_LENGTH = 420;
+
+export function buildProjectDescriptionPreview(
+  description: string,
+  maxLength = PROJECT_DESCRIPTION_PREVIEW_LENGTH,
+): string {
+  const normalizedDescription = description.trim();
+  if (normalizedDescription.length <= maxLength) {
+    return normalizedDescription;
+  }
+
+  const candidate = normalizedDescription.slice(0, maxLength + 1);
+  const minimumNaturalBoundary = Math.floor(maxLength * 0.5);
+  const paragraphBoundary = Math.max(candidate.lastIndexOf("\n\n"), candidate.lastIndexOf("\n"));
+  const sentenceBoundary = [...candidate.matchAll(/[.!?](?=\s|$)/g)].at(-1)?.index ?? -1;
+  const naturalBoundary = Math.max(paragraphBoundary, sentenceBoundary + 1);
+  const wordBoundary = candidate.lastIndexOf(" ");
+  const previewEnd =
+    naturalBoundary >= minimumNaturalBoundary
+      ? naturalBoundary
+      : wordBoundary >= minimumNaturalBoundary
+        ? wordBoundary
+        : maxLength;
+  const preview = normalizedDescription.slice(0, previewEnd).trimEnd();
+
+  return /[.!?]$/.test(preview) ? preview : `${preview}…`;
+}
+
 /** Центральная колонка детали проекта: описание, новости. */
 @Component({
   selector: "app-projects-mid-side",
@@ -49,8 +77,6 @@ export class ProjectsMidSideComponent {
   // Ссылки на элементы DOM
   readonly newsEl = viewChild<ElementRef>("newsEl");
   readonly contentEl = viewChild<ElementRef>("contentEl");
-  readonly descEl = viewChild<ElementRef>("descEl");
-
   // Ссылки на дочерние компоненты
   readonly newsFormComponent = viewChild(NewsFormComponent);
   readonly newsCardComponent = viewChild(NewsCardComponent);
@@ -60,7 +86,6 @@ export class ProjectsMidSideComponent {
   private readonly newsInfoService = inject(NewsInfoService);
   private readonly projectsDetailUIInfoService = inject(ProjectsDetailUIInfoService);
   private readonly profileInfoService = inject(ProfileInfoService);
-  private readonly expandService = inject(ExpandService);
 
   protected readonly directions = this.projectsDetailUIInfoService.directions;
 
@@ -70,8 +95,17 @@ export class ProjectsMidSideComponent {
   protected readonly profile = this.profileInfoService.profile;
   protected readonly news = this.newsInfoService.news; // Массив новостей
   protected readonly newsPending = signal(false);
-  protected readonly readFullDescription = this.expandService.readFullDescription; // Флаг развернутого описания
-  protected readonly descriptionExpandable = this.expandService.descriptionExpandable; // Флаг необходимости кнопки "Читать полностью"
+  protected readonly descriptionExpanded = signal(false);
+  protected readonly fullDescription = computed(() => this.project()?.description?.trim() ?? "");
+  protected readonly descriptionPreview = computed(() =>
+    buildProjectDescriptionPreview(this.fullDescription()),
+  );
+  protected readonly descriptionExpandable = computed(
+    () => this.descriptionPreview() !== this.fullDescription(),
+  );
+  protected readonly visibleDescription = computed(() =>
+    this.descriptionExpanded() ? this.fullDescription() : this.descriptionPreview(),
+  );
 
   onNewsInVew(entries: IntersectionObserverEntry[]): void {
     this.projectsDetailService.onNewsInVew(entries);
@@ -115,7 +149,7 @@ export class ProjectsMidSideComponent {
     this.projectsDetailService.onTransferOwnership(id);
   }
 
-  onExpandDescription(elem: HTMLElement, expandedClass: string, isExpanded: boolean): void {
-    this.expandService.onExpand("description", elem, expandedClass, isExpanded);
+  onToggleDescription(): void {
+    this.descriptionExpanded.update(expanded => !expanded);
   }
 }
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.html
index 733e790c4..7ada0cbc4 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.html
@@ -15,7 +15,7 @@ <h3 class="text-body-12 lists__title">контакты</h3>
               @if (link | userLinks; as l) {
                 <a class="lists__item" target="_blank" [href]="link">
                   <i class="lists__icon" appIcon [icon]="l.iconName" appSquare="10"></i>
-                  <span>{{ l.tag | truncate: 20 }}</span>
+                  <span class="lists__contact">{{ l.tag }}</span>
                 </a>
               }
             </li>
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.scss
index ca7b00f53..65e3adb6d 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/info/components/projects-right-side/projects-right-side.component.scss
@@ -90,6 +90,7 @@
     display: flex;
     gap: 6px;
     align-items: center;
+    min-width: 0;
 
     &--status {
       padding: 8px;
@@ -117,5 +118,11 @@
     }
   }
 
+  &__contact {
+    min-width: 0;
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
+
   @include expandable-list;
 }
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html
index c1f6f1d9f..406d37b7d 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.html
@@ -472,6 +472,14 @@ <h6 class="text-body-10">исполнители</h6>
     class="modal"
   >
     <div class="modal__wrapper" (click)="$event.stopPropagation()">
+      <button
+        type="button"
+        class="modal__close"
+        aria-label="Закрыть библиотеку навыков"
+        (click)="closeSkillsGroupsModal()"
+      >
+        <i appIcon icon="cross" appSquare="12"></i>
+      </button>
       <p class="text-body-14">библиотека навыков</p>
       <div class="modal__content">
         <div class="modal__skills-groups">
@@ -483,7 +491,7 @@ <h6 class="text-body-10">исполнители</h6>
                   [options]="skillsGroup.skills"
                   [selected]="selectedSkills"
                   [hasOpenGroups]="hasOpenSkillsGroups"
-                  [disabled]="isGroupDisabled(skillsGroup.id)"
+                  [isOpen]="openGroupIndex === skillsGroup.id"
                   (optionToggled)="onToggleSkill($event)"
                   (groupToggled)="onGroupToggled($event, skillsGroup.id)"
                 ></app-skills-group>
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.scss b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.scss
index d4a1e1ec9..7d3474cc6 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.scss
@@ -477,6 +477,7 @@
 
 .modal {
   &__wrapper {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -484,6 +485,17 @@
     width: 672px;
   }
 
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 8px;
+    color: var(--black);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
@@ -499,6 +511,7 @@
 
   &__specs-groups,
   &__skills-groups {
+    position: relative;
     height: 100%;
     overflow: auto;
     scrollbar-width: thin;
@@ -508,15 +521,6 @@
       flex-direction: column;
       gap: 20px;
       padding: 14px;
-
-      @for $i from 1 through 8 {
-        > li:nth-child(#{$i}) {
-          ::ng-deep app-skills-group .content--open {
-            top: 0;
-            margin-top: -#{($i - 1) * 50}px;
-          }
-        }
-      }
     }
 
     li {
diff --git a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts
index 43c6e7d2a..a19d9c702 100644
--- a/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/detail/kanban/components/task/detail/task-detail.component.ts
@@ -652,6 +652,10 @@ export class TaskDetailComponent implements OnInit, AfterViewInit, OnDestroy {
     this.skillsGroupsModalOpen.update(open => !open);
   }
 
+  closeSkillsGroupsModal(): void {
+    this.skillsGroupsModalOpen.set(false);
+  }
+
   onSubmit(): void {
     if (!this.validationService.getFormValidation(this.sendResultForm)) {
       return;
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html
index 50a108c61..4645f89f3 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.html
@@ -212,8 +212,16 @@
   }
 </div>
 
-<app-modal [open]="skillsGroupsModalOpen()" class="modal">
+<app-modal [open]="skillsGroupsModalOpen()" (openChange)="closeSkillsGroupsModal()" class="modal">
   <div class="modal__wrapper">
+    <button
+      type="button"
+      class="modal__close"
+      aria-label="Закрыть библиотеку навыков"
+      (click)="closeSkillsGroupsModal()"
+    >
+      <i appIcon icon="cross" appSquare="12"></i>
+    </button>
     <p class="text-body-14">библиотека навыков</p>
     <div class="modal__content">
       <div class="modal__skills-groups">
@@ -225,7 +233,7 @@
                 [options]="skillsGroup.skills"
                 [selected]="this.vacancyForm.getRawValue().skills!"
                 [hasOpenGroups]="hasOpenSkillsGroups()"
-                [disabled]="hasOpenSkillsGroups() && !openGroupIds().has(skillsGroup.id)"
+                [isOpen]="openGroupIds().has(skillsGroup.id)"
                 (optionToggled)="onToggleSkill($event)"
                 (groupToggled)="onGroupToggled($event, skillsGroup.id)"
               ></app-skills-group>
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
index 76e3e1742..cec4354a2 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.scss
@@ -108,6 +108,7 @@
 
 .modal {
   &__wrapper {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 20px;
@@ -115,6 +116,17 @@
     width: 672px;
   }
 
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 8px;
+    color: var(--black);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
@@ -130,6 +142,7 @@
 
   &__specs-groups,
   &__skills-groups {
+    position: relative;
     height: 100%;
     overflow: auto;
     scrollbar-width: thin;
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts
index 85818310d..965ac6717 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-vacancy-step/project-vacancy-step.component.ts
@@ -139,6 +139,10 @@ export class ProjectVacancyStepComponent {
     this.skillsGroupsModalOpen.update(open => !open);
   }
 
+  closeSkillsGroupsModal(): void {
+    this.skillsGroupsModalOpen.set(false);
+  }
+
   onGroupToggled(isOpen: boolean, skillsGroupId: number): void {
     this.projectsEditInfoService.onGroupToggled(isOpen, skillsGroupId);
   }
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.html b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.html
index 6006261b3..9369f106d 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.html
@@ -20,9 +20,13 @@
           >посмотреть отклики</app-button
         >
       } @else if (vacancy()!.hasResponded) {
-        <app-button size="big" customTypographyClass="text-body-12" [disabled]="true">{{
-          responseStatusLabel(vacancy()!.responseStatus)
-        }}</app-button>
+        <app-button
+          size="big"
+          customTypographyClass="text-body-12"
+          [color]="responseStatusColor(vacancy()!.responseStatus)"
+          [disabled]="true"
+          >{{ responseStatusLabel(vacancy()!.responseStatus) }}</app-button
+        >
       } @else if (vacancy()!.canRespond) {
         <app-button size="big" customTypographyClass="text-body-12" (click)="onSendResponseClick()"
           >откликнуться</app-button
@@ -114,7 +118,7 @@ <h3 class="text-body-12 lists__title">контакты</h3>
               @if (link | userLinks; as l) {
                 <a class="lists__item" target="_blank" [href]="link">
                   <i class="lists__icon" appIcon [icon]="l.iconName" appSquare="10"></i>
-                  <span>{{ l.tag | truncate: 30 }}</span>
+                  <span class="lists__contact">{{ l.tag }}</span>
                 </a>
               }
             </li>
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
index cc2bc6931..a70444fd3 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.scss
@@ -163,4 +163,11 @@
     word-break: break-word;
     overflow-wrap: anywhere;
   }
+
+  &__contact {
+    min-width: 0;
+    text-align: left;
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.ts b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.ts
index 9591ea084..8b0dd0267 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-right-side/vacancies-right-side.component.ts
@@ -49,6 +49,19 @@ export class VacanciesRightSideComponent {
     }
   }
 
+  protected responseStatusColor(
+    status: Vacancy["responseStatus"] | undefined,
+  ): "gold" | "green" | "red" {
+    switch (status) {
+      case "accepted":
+        return "green";
+      case "rejected":
+        return "red";
+      default:
+        return "gold";
+    }
+  }
+
   onSendResponseClick(): void {
     this.sendResponse.emit();
   }
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html
index be1d30ebd..03aea6457 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.html
@@ -11,8 +11,8 @@
           borderColor="accent"
         ></app-avatar>
         <div class="vacancy__project--info">
-          <p class="text-body-10" style="color: var(--black)">
-            {{ vacancy().project.name | truncate: 12 }}
+          <p class="text-body-10 vacancy__project-name">
+            {{ vacancy().project.name }}
           </p>
           <p class="text-body-10">
             {{ vacancy().datetimeCreated | dayjs: "format" : "DD.MM.YY • HH:MM" }}
@@ -21,13 +21,13 @@
       </div>
     } @else {
       <p class="text-body-12 vacancy__role">
-        {{ vacancy().role | truncate: 12 }}
+        {{ vacancy().role }}
       </p>
     }
     <div class="vacancy__info--top">
       @if (type() === "vacancies") {
         <p class="text-body-12 vacancy__role">
-          {{ vacancy().role | truncate: 12 }}
+          {{ vacancy().role }}
         </p>
       }
       <div class="vacancy__salary">
@@ -73,11 +73,20 @@
       size="medium"
       >подробнее</app-button
     >
-    <app-button
-      [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
-      [queryParams]="{ sendResponse: true }"
-      size="medium"
-      >откликнуться</app-button
-    >
+    @if (type() === "vacancies" && vacancy().canManageResponses) {
+      <app-button
+        [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
+        [queryParams]="{ manageResponses: true }"
+        size="medium"
+        >посмотреть отклики</app-button
+      >
+    } @else if (type() !== "vacancies" || (vacancy().canRespond && !vacancy().hasResponded)) {
+      <app-button
+        [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
+        [queryParams]="{ sendResponse: true }"
+        size="medium"
+        >откликнуться</app-button
+      >
+    }
   </div>
 </div>
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
index d3ace43e7..735a88788 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.scss
@@ -5,8 +5,10 @@
 
   &__info {
     display: flex;
+    gap: 12px;
     align-items: center;
     justify-content: space-between;
+    min-width: 0;
     padding-bottom: 8px;
     border-bottom: 0.5px solid var(--accent);
 
@@ -16,27 +18,60 @@
 
     &--top {
       display: flex;
+      flex: 1 1 auto;
       flex-direction: column;
       gap: 3px;
       align-items: flex-end;
+      min-width: 0;
     }
   }
 
   &__project {
     display: flex;
+    flex: 0 1 auto;
     gap: 10px;
     align-items: center;
+    min-width: 0;
+
+    &--info {
+      min-width: 0;
+    }
   }
 
+  /* stylelint-disable value-no-vendor-prefix */
+  &__project-name {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--black) !important;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  /* stylelint-enable value-no-vendor-prefix */
+
+  /* stylelint-disable value-no-vendor-prefix */
   &__role {
+    display: -webkit-box;
+    max-width: 100%;
+    overflow: hidden;
     color: var(--accent);
+    text-align: right;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
   }
+  /* stylelint-enable value-no-vendor-prefix */
 
   &__salary {
     display: flex;
+    flex: 0 0 auto;
     gap: 6px;
     align-items: center;
     color: var(--grey-for-text);
+
+    p {
+      white-space: nowrap;
+    }
   }
 
   &__description {
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.spec.ts b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.spec.ts
index 9e953b246..66cb32c5b 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.spec.ts
@@ -2,7 +2,8 @@
 
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { ProjectVacancyCardComponent } from "./project-vacancy-card.component";
-import { provideRouter } from "@angular/router";
+import { provideRouter, RouterLink } from "@angular/router";
+import { By } from "@angular/platform-browser";
 
 describe("ProjectVacancyCardComponent", () => {
   let component: ProjectVacancyCardComponent;
@@ -18,7 +19,7 @@ describe("ProjectVacancyCardComponent", () => {
     component = fixture.componentInstance;
     fixture.componentRef.setInput("vacancy", {
       id: 1,
-      name: "Test Vacancy",
+      role: "Test Vacancy",
       description: "",
       requiredSkills: [],
       salary: "100000",
@@ -29,4 +30,121 @@ describe("ProjectVacancyCardComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("показывает длинное название вакансии целиком в двухстрочном контейнере", () => {
+    const longRole = "Очень длинное название роли специалиста по развитию цифровых продуктов";
+    fixture.componentRef.setInput("type", "vacancies");
+    fixture.componentRef.setInput("vacancy", {
+      id: 1,
+      role: longRole,
+      description: "",
+      requiredSkills: [],
+      salary: "100000",
+      datetimeCreated: "2026-08-29T12:00:00Z",
+      project: { name: "Проект", imageAddress: "" },
+    });
+    fixture.detectChanges();
+
+    const role = fixture.nativeElement.querySelector(".vacancy__role") as HTMLElement;
+    expect(role.textContent?.trim()).toBe(longRole);
+  });
+
+  it.each([
+    [
+      "leader",
+      { canManageResponses: true, canRespond: false, hasResponded: false },
+      "посмотреть отклики",
+    ],
+    [
+      "outsider",
+      { canManageResponses: false, canRespond: true, hasResponded: false },
+      "откликнуться",
+    ],
+  ])("uses backend applicant flags for %s catalog action", (_, state, expectedAction) => {
+    fixture.componentRef.setInput("type", "vacancies");
+    fixture.componentRef.setInput("vacancy", {
+      id: 7,
+      role: "Frontend developer",
+      description: "",
+      requiredSkills: [],
+      salary: "100000",
+      datetimeCreated: "2026-08-29T12:00:00Z",
+      project: { name: "Проект", imageAddress: "" },
+      ...state,
+    });
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent as string;
+    expect(text).toContain("подробнее");
+    expect(text).toContain(expectedAction);
+  });
+
+  it("uses manageResponses query parameter for the leader action", () => {
+    fixture.componentRef.setInput("type", "vacancies");
+    fixture.componentRef.setInput("vacancy", {
+      id: 7,
+      role: "Frontend developer",
+      description: "",
+      requiredSkills: [],
+      salary: "100000",
+      datetimeCreated: "2026-08-29T12:00:00Z",
+      project: { name: "Проект", imageAddress: "" },
+      canManageResponses: true,
+      canRespond: false,
+      hasResponded: false,
+    });
+    fixture.detectChanges();
+
+    const managerLink = fixture.debugElement
+      .queryAll(By.directive(RouterLink))
+      .find(element => element.nativeElement.textContent.includes("посмотреть отклики"));
+
+    expect(managerLink?.injector.get(RouterLink).queryParams).toEqual({ manageResponses: true });
+  });
+
+  it.each([
+    ["collaborator", { canManageResponses: false, canRespond: false, hasResponded: false }],
+    ["responded user", { canManageResponses: false, canRespond: false, hasResponded: true }],
+  ])("shows only detail action for %s", (_, state) => {
+    fixture.componentRef.setInput("type", "vacancies");
+    fixture.componentRef.setInput("vacancy", {
+      id: 7,
+      role: "Frontend developer",
+      description: "",
+      requiredSkills: [],
+      salary: "100000",
+      datetimeCreated: "2026-08-29T12:00:00Z",
+      project: { name: "Проект", imageAddress: "" },
+      ...state,
+    });
+    fixture.detectChanges();
+
+    const actions = Array.from(
+      fixture.nativeElement.querySelectorAll(".vacancy__actions app-button"),
+    ) as HTMLElement[];
+    expect(actions).toHaveLength(1);
+    expect(actions[0].textContent).toContain("подробнее");
+  });
+
+  it("keeps a long project title in the DOM without hard truncation", () => {
+    const projectName = "Очень длинное название проекта без потери полного текста в DOM";
+    fixture.componentRef.setInput("type", "vacancies");
+    fixture.componentRef.setInput("vacancy", {
+      id: 7,
+      role: "Frontend developer",
+      description: "",
+      requiredSkills: [],
+      salary: "100000",
+      datetimeCreated: "2026-08-29T12:00:00Z",
+      project: { name: projectName, imageAddress: "" },
+      canRespond: false,
+      canManageResponses: false,
+      hasResponded: false,
+    });
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(".vacancy__project-name").textContent.trim()).toBe(
+      projectName,
+    );
+  });
 });
diff --git a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts
index a18e58e83..96f0d1e90 100644
--- a/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/project-vacancy-card/project-vacancy-card.component.ts
@@ -15,7 +15,7 @@ import { RouterLink } from "@angular/router";
 import { Vacancy } from "@domain/vacancy/vacancy.model";
 import { IconComponent } from "@uilib";
 import { ButtonComponent } from "@ui/primitives";
-import { DayjsPipe, ParseBreaksPipe, ParseLinksPipe, TruncatePipe } from "@corelib";
+import { DayjsPipe, ParseBreaksPipe, ParseLinksPipe } from "@corelib";
 import { TagComponent } from "@ui/primitives/tag/tag.component";
 import { AvatarComponent } from "@ui/primitives/avatar/avatar.component";
 import { AppRoutes } from "@api/paths/app-routes";
@@ -31,7 +31,6 @@ import { ExpandService } from "@api/expand/expand.service";
     ButtonComponent,
     ParseLinksPipe,
     ParseBreaksPipe,
-    TruncatePipe,
     TagComponent,
     AvatarComponent,
     DayjsPipe,
diff --git a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.html b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.html
index 64028bb76..8857bd414 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.html
+++ b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.html
@@ -8,6 +8,7 @@
   <div
     class="heading__top"
     [class.heading__top--has-open]="hasOpenGroups()"
+    [class.heading__top--selected]="contentVisible()"
     [class.heading__top--disabled]="disabled()"
     (click)="toggleContentVisible()"
   >
@@ -17,7 +18,7 @@
     }
   </div>
   @if (contentVisible()) {
-    <div class="content" [class.content--open]="hasOpenGroups()">
+    <div class="content" data-testid="skills-options-panel" [class.content--open]="hasOpenGroups()">
       @for (opt of options; track opt.id) {
         <div
           class="content__option"
diff --git a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss
index 4fc68d9ef..b51c89e5b 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.scss
@@ -6,7 +6,6 @@
   min-height: 32px;
 
   .heading {
-    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -39,6 +38,12 @@
       width: 100%;
       transition: width 0.2s ease;
 
+      &:hover,
+      &--selected {
+        color: var(--accent);
+        background-color: rgb(109 40 255 / 6%);
+      }
+
       .heading--open &,
       &--has-open {
         width: 50%;
@@ -58,9 +63,13 @@
 
     &--open {
       position: absolute;
-      top: 0%;
-      right: 0%;
+      top: 0;
+      right: 0;
       width: 40%;
+      max-height: 100%;
+      padding: 14px;
+      overflow-y: auto;
+      scrollbar-width: thin;
     }
 
     &__option {
diff --git a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.spec.ts b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.spec.ts
index 05a5c8225..f9e06b95e 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.spec.ts
@@ -1,16 +1,60 @@
 /** @format */
 
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component, signal } from "@angular/core";
+import { Skill } from "@domain/skills/skill.model";
+import { By } from "@angular/platform-browser";
 
 import { SkillsGroupComponent } from "./skills-group.component";
 
+@Component({
+  imports: [SkillsGroupComponent],
+  template: `
+    @for (group of groups; track group.id) {
+      <app-skills-group
+        [title]="group.name"
+        [options]="group.skills"
+        [selected]="selected()"
+        [hasOpenGroups]="openGroup() !== null"
+        [isOpen]="openGroup() === group.id"
+        (groupToggled)="openGroup.set($event ? group.id : null)"
+        (optionToggled)="toggleSkill($event)"
+      ></app-skills-group>
+    }
+  `,
+})
+class SkillsGroupHostComponent {
+  readonly openGroup = signal<number | null>(null);
+  readonly selected = signal<Skill[]>([]);
+  readonly groups = [
+    {
+      id: 1,
+      name: "Дизайн",
+      skills: [{ id: 1, name: "Figma", category: { id: 1, name: "Дизайн" } }],
+    },
+    {
+      id: 2,
+      name: "Разработка",
+      skills: [{ id: 2, name: "Angular", category: { id: 2, name: "Разработка" } }],
+    },
+  ] as Array<{ id: number; name: string; skills: Skill[] }>;
+
+  toggleSkill(skill: Skill): void {
+    this.selected.update(selected =>
+      selected.some(item => item.id === skill.id)
+        ? selected.filter(item => item.id !== skill.id)
+        : [...selected, skill],
+    );
+  }
+}
+
 describe("SkillsGroupComponent", () => {
   let component: SkillsGroupComponent;
   let fixture: ComponentFixture<SkillsGroupComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SkillsGroupComponent],
+      imports: [SkillsGroupComponent, SkillsGroupHostComponent],
     }).compileComponents();
   });
 
@@ -26,4 +70,41 @@ describe("SkillsGroupComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("показывает options panel сверху правой области для активной категории", () => {
+    fixture.componentRef.setInput("hasOpenGroups", true);
+    fixture.componentRef.setInput("options", [
+      { id: 1, name: "Типографика", category: { id: 2, name: "Дизайн" } },
+    ]);
+    fixture.componentRef.setInput("isOpen", true);
+    fixture.detectChanges();
+
+    const heading = fixture.nativeElement.querySelector(".heading__top") as HTMLElement;
+    const panel = fixture.nativeElement.querySelector(
+      '[data-testid="skills-options-panel"]',
+    ) as HTMLElement;
+
+    expect(heading.classList).toContain("heading__top--selected");
+    expect(panel.classList).toContain("content--open");
+    expect(panel.textContent).toContain("Типографика");
+  });
+
+  it("switches categories in one click and keeps selected skills", () => {
+    const hostFixture = TestBed.createComponent(SkillsGroupHostComponent);
+    hostFixture.detectChanges();
+
+    const headings = hostFixture.debugElement.queryAll(By.css(".heading__top"));
+    headings[0].nativeElement.click();
+    hostFixture.detectChanges();
+    hostFixture.debugElement.query(By.css(".content__option")).nativeElement.click();
+    hostFixture.detectChanges();
+
+    headings[1].nativeElement.click();
+    hostFixture.detectChanges();
+
+    expect(hostFixture.componentInstance.openGroup()).toBe(2);
+    expect(hostFixture.componentInstance.selected().map(skill => skill.name)).toEqual(["Figma"]);
+    expect(hostFixture.nativeElement.textContent).toContain("Angular");
+    expect(hostFixture.nativeElement.textContent).not.toContain("Figma");
+  });
 });
diff --git a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.ts b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.ts
index a0982f55b..4ef2482bc 100644
--- a/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/skills-group/skills-group.component.ts
@@ -3,6 +3,7 @@ import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   EventEmitter,
   input,
   Input,
@@ -46,6 +47,7 @@ export class SkillsGroupComponent {
 
   readonly title = input.required<string>();
   readonly hasOpenGroups = input<boolean>(false);
+  readonly isOpen = input<boolean | null>(null);
   readonly disabled = input<boolean>(false);
 
   readonly groupToggled = output<boolean>();
@@ -53,15 +55,17 @@ export class SkillsGroupComponent {
 
   _options = signal<(Skill & { checked?: boolean })[]>([]);
   _selected = signal<Skill[]>([]);
-  contentVisible = signal(false);
+  private readonly internalContentVisible = signal(false);
+  readonly contentVisible = computed(() => this.isOpen() ?? this.internalContentVisible());
 
   toggleContentVisible() {
     if (this.disabled()) {
       return;
     }
 
-    this.contentVisible.update(val => !val);
-    this.groupToggled.emit(this.contentVisible());
+    const nextValue = !this.contentVisible();
+    this.internalContentVisible.set(nextValue);
+    this.groupToggled.emit(nextValue);
   }
 
   onOptionClick(opt: Skill) {
diff --git a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.html b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.html
index 14fdb1108..50f478fa8 100644
--- a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.html
+++ b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.html
@@ -13,7 +13,14 @@
   >
     <span class="text-body-12">{{ title() }}</span>
     @if (!disabled()) {
-      <i appIcon icon="arrow-no-body" appWidth="18" appHeight="9" appViewBox="0 0 18 9"></i>
+      <i
+        class="heading__chevron"
+        appIcon
+        icon="arrow-no-body"
+        appWidth="18"
+        appHeight="9"
+        appViewBox="0 0 18 9"
+      ></i>
     }
   </div>
   @if (contentVisible()) {
@@ -27,7 +34,11 @@
         >
           <span class="text-body-12">{{ opt.name }}</span>
           @if (selectedName() === opt.name) {
-            <i appIcon icon="check" appSquare="10"></i>
+            <span
+              class="content__option-dot"
+              data-testid="selected-specialization-dot"
+              aria-hidden="true"
+            ></span>
           }
         </div>
       }
diff --git a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss
index a7bb01d6d..1bf7d9929 100644
--- a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.scss
@@ -22,8 +22,8 @@
     &--open {
       z-index: 1000;
 
-      i {
-        transform: rotate(90deg);
+      .heading__chevron {
+        transform: rotate(0deg);
       }
     }
 
@@ -106,11 +106,14 @@
         span {
           font-weight: 600;
         }
+      }
 
-        i {
-          flex: 0 0 auto;
-          color: var(--accent);
-        }
+      &-dot {
+        flex-shrink: 0;
+        width: 8px;
+        height: 8px;
+        background-color: var(--accent);
+        border-radius: 50%;
       }
 
       &--disabled {
diff --git a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.spec.ts b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.spec.ts
index 6bb8700eb..fe8dda6eb 100644
--- a/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/specializations-group/specializations-group.component.spec.ts
@@ -94,6 +94,16 @@ describe("SpecializationsGroupComponent", () => {
 
     expect(hostFixture.componentInstance.selectedName()).toBe("Frontend developer");
     expect(hostFixture.debugElement.query(By.css(".content__option--selected"))).toBeTruthy();
-    expect(hostFixture.debugElement.query(By.css(".content__option--selected i"))).toBeTruthy();
+    expect(
+      hostFixture.debugElement.query(By.css('[data-testid="selected-specialization-dot"]')),
+    ).toBeTruthy();
+    expect(hostFixture.debugElement.query(By.css(".content__option--selected i"))).toBeFalsy();
+  });
+
+  it("использует системную иконку chevron для открытой категории", () => {
+    fixture.componentRef.setInput("isOpen", true);
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css(".heading--open .heading__chevron"))).toBeTruthy();
   });
 });
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html
index 75cf8c5a7..f9c4a36ba 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.html
@@ -4,7 +4,7 @@
   <div class="vacancy">
     <div class="vacancy__info">
       <div class="vacancy__info--text">
-        <h3 class="text-body-12 vacancy__role">{{ vacancy()!.role | truncate: 20 }}</h3>
+        <h3 class="text-body-12 vacancy__role">{{ vacancy()!.role }}</h3>
         <span
           class="text-body-8 vacancy__status"
           [class.vacancy__status--active]="vacancy()!.isActive"
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
index f17a5d48c..845cf30d0 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.scss
@@ -26,8 +26,9 @@
     &--text {
       display: flex;
       gap: 12px;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
+      min-width: 0;
       padding-bottom: 5px;
       margin-bottom: 10px;
       border-bottom: 1px solid var(--dark-grey);
@@ -41,6 +42,17 @@
     align-items: center;
   }
 
+  /* stylelint-disable value-no-vendor-prefix */
+  &__role {
+    display: -webkit-box;
+    min-width: 0;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  /* stylelint-enable value-no-vendor-prefix */
+
   &__status {
     flex-shrink: 0;
     padding: 4px 8px;
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.spec.ts b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.spec.ts
index d2121a5e4..5d547b70a 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.spec.ts
@@ -58,4 +58,12 @@ describe("VacancyCardComponent", () => {
     expect(status.textContent.trim()).toBe(label);
     expect(status.classList).toContain(`vacancy__status--${className}`);
   });
+
+  it("не удаляет часть длинного названия вакансии из DOM", () => {
+    const longRole = "Ведущий специалист по развитию международных образовательных программ";
+    fixture.componentRef.setInput("vacancy", { ...createVacancy(true), role: longRole });
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(".vacancy__role").textContent.trim()).toBe(longRole);
+  });
 });
diff --git a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts
index b66c423b9..cd19ef5da 100644
--- a/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/vacancy-card/vacancy-card.component.ts
@@ -13,14 +13,13 @@ import {
 import { Vacancy } from "@domain/vacancy/vacancy.model";
 import { IconComponent, ButtonComponent } from "@ui/primitives";
 import { TagComponent } from "@ui/primitives/tag/tag.component";
-import { TruncatePipe } from "@corelib";
 
 /** Компонент карточки вакансии с кнопками редактирования и удаления. */
 @Component({
   selector: "app-vacancy-card",
   templateUrl: "./vacancy-card.component.html",
   styleUrl: "./vacancy-card.component.scss",
-  imports: [IconComponent, ButtonComponent, TagComponent, TruncatePipe],
+  imports: [IconComponent, ButtonComponent, TagComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VacancyCardComponent implements OnInit {