From 324a3577b5a393bb77ad176188b66094b670c17b Mon Sep 17 00:00:00 2001
From: Fedor <Peter252005@yandex.ru>
Date: Wed, 2 Sep 2026 02:06:41 +0300
Subject: [PATCH 1/2] Polish platform UI analytics and region selection

---
 .../lists/russian-regions-list.const.spec.ts  |  31 ++++
 .../lists/russian-regions-list.const.ts       | 112 +++++++++++++
 .../facades/edit/project-form.factory.spec.ts |  11 ++
 .../facades/edit/project-form.factory.ts      |  24 ++-
 .../facades/edit/project-form.service.spec.ts |  20 +++
 .../facades/edit/project-form.service.ts      |  17 +-
 .../ui/pages/auth/login/login.component.html  |   8 +-
 .../pages/auth/login/login.component.spec.ts  |  16 ++
 .../auth/register/register.component.html     |   2 +-
 .../auth/register/register.component.spec.ts  |  20 +++
 .../profile-left-side.component.scss          |  11 +-
 .../profile-right-side.component.html         |   4 +-
 .../profile-right-side.component.scss         |  11 ++
 .../detail/analytics/analytics.component.html |  26 ++--
 .../detail/analytics/analytics.component.scss |  57 ++++++-
 .../analytics/analytics.component.spec.ts     |   7 +-
 .../program-projects-filter.component.html    |   2 +-
 .../program-projects-filter.component.scss    |  16 +-
 .../program-projects-filter.component.spec.ts |  29 +++-
 .../project-main-step.component.html          |  16 +-
 .../project-main-step.component.spec.ts       | 114 ++++++++++++++
 .../project-main-step.component.ts            |   2 +
 .../vacancies-left-side.component.html        |   5 +-
 .../vacancies-left-side.component.scss        |  14 +-
 .../vacancy-responses.component.html          |  29 ++--
 .../vacancy-responses.component.scss          |  34 +++-
 .../vacancy-responses.component.spec.ts       |  18 +++
 .../project-vacancy-card.component.html       |   3 +-
 .../project-vacancy-card.component.scss       |  30 +++-
 .../project-vacancy-card.component.spec.ts    |  16 ++
 .../region-select.component.html              |  51 ++++++
 .../region-select.component.scss              | 102 ++++++++++++
 .../region-select.component.spec.ts           |  87 +++++++++++
 .../region-select/region-select.component.ts  | 147 ++++++++++++++++++
 .../vacancy-card/vacancy-card.component.html  |  16 +-
 .../vacancy-card/vacancy-card.component.scss  |  10 ++
 .../vacancy-card.component.spec.ts            |  12 ++
 .../src/styles/components/_vacancy-skill.scss |  25 +++
 .../src/styles/pages/auth.scss                |  12 +-
 39 files changed, 1090 insertions(+), 77 deletions(-)
 create mode 100644 projects/core/src/consts/lists/russian-regions-list.const.spec.ts
 create mode 100644 projects/core/src/consts/lists/russian-regions-list.const.ts
 create mode 100644 projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.spec.ts
 create mode 100644 projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html
 create mode 100644 projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
 create mode 100644 projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts
 create mode 100644 projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
 create mode 100644 projects/social_platform/src/styles/components/_vacancy-skill.scss

diff --git a/projects/core/src/consts/lists/russian-regions-list.const.spec.ts b/projects/core/src/consts/lists/russian-regions-list.const.spec.ts
new file mode 100644
index 000000000..81572ada2
--- /dev/null
+++ b/projects/core/src/consts/lists/russian-regions-list.const.spec.ts
@@ -0,0 +1,31 @@
+/** @format */
+
+import {
+  filterRussianRegions,
+  findCanonicalRussianRegion,
+  russianRegions,
+} from "./russian-regions-list.const";
+
+describe("russianRegions", () => {
+  it("contains a unique canonical list", () => {
+    expect(russianRegions).toHaveLength(89);
+    expect(new Set(russianRegions).size).toBe(russianRegions.length);
+  });
+
+  it.each([
+    ["Москва", "Москва"],
+    [" мОскВа ", "Москва"],
+    ["санкт-петербург", "Санкт-Петербург"],
+  ])("normalizes safe case and whitespace differences for %s", (value, expected) => {
+    expect(findCanonicalRussianRegion(value)).toBe(expected);
+  });
+
+  it("does not guess misspelled or arbitrary legacy values", () => {
+    expect(findCanonicalRussianRegion("Миксва")).toBeNull();
+    expect(findCanonicalRussianRegion("Россия")).toBeNull();
+  });
+
+  it("filters by a case-insensitive substring", () => {
+    expect(filterRussianRegions("  татар ")).toEqual(["Республика Татарстан"]);
+  });
+});
diff --git a/projects/core/src/consts/lists/russian-regions-list.const.ts b/projects/core/src/consts/lists/russian-regions-list.const.ts
new file mode 100644
index 000000000..389c19ea1
--- /dev/null
+++ b/projects/core/src/consts/lists/russian-regions-list.const.ts
@@ -0,0 +1,112 @@
+/** Канонические display-названия субъектов РФ для формы проекта. */
+export const russianRegions = [
+  "Республика Адыгея",
+  "Республика Алтай",
+  "Республика Башкортостан",
+  "Республика Бурятия",
+  "Республика Дагестан",
+  "Донецкая Народная Республика",
+  "Республика Ингушетия",
+  "Кабардино-Балкарская Республика",
+  "Республика Калмыкия",
+  "Карачаево-Черкесская Республика",
+  "Республика Карелия",
+  "Республика Коми",
+  "Республика Крым",
+  "Луганская Народная Республика",
+  "Республика Марий Эл",
+  "Республика Мордовия",
+  "Республика Саха (Якутия)",
+  "Республика Северная Осетия — Алания",
+  "Республика Татарстан",
+  "Республика Тыва",
+  "Удмуртская Республика",
+  "Республика Хакасия",
+  "Чеченская Республика",
+  "Чувашская Республика",
+  "Алтайский край",
+  "Забайкальский край",
+  "Камчатский край",
+  "Краснодарский край",
+  "Красноярский край",
+  "Пермский край",
+  "Приморский край",
+  "Ставропольский край",
+  "Хабаровский край",
+  "Амурская область",
+  "Архангельская область",
+  "Астраханская область",
+  "Белгородская область",
+  "Брянская область",
+  "Владимирская область",
+  "Волгоградская область",
+  "Вологодская область",
+  "Воронежская область",
+  "Запорожская область",
+  "Ивановская область",
+  "Иркутская область",
+  "Калининградская область",
+  "Калужская область",
+  "Кемеровская область — Кузбасс",
+  "Кировская область",
+  "Костромская область",
+  "Курганская область",
+  "Курская область",
+  "Ленинградская область",
+  "Липецкая область",
+  "Магаданская область",
+  "Московская область",
+  "Мурманская область",
+  "Нижегородская область",
+  "Новгородская область",
+  "Новосибирская область",
+  "Омская область",
+  "Оренбургская область",
+  "Орловская область",
+  "Пензенская область",
+  "Псковская область",
+  "Ростовская область",
+  "Рязанская область",
+  "Самарская область",
+  "Саратовская область",
+  "Сахалинская область",
+  "Свердловская область",
+  "Смоленская область",
+  "Тамбовская область",
+  "Тверская область",
+  "Томская область",
+  "Тульская область",
+  "Тюменская область",
+  "Ульяновская область",
+  "Херсонская область",
+  "Челябинская область",
+  "Ярославская область",
+  "Москва",
+  "Санкт-Петербург",
+  "Севастополь",
+  "Еврейская автономная область",
+  "Ненецкий автономный округ",
+  "Ханты-Мансийский автономный округ — Югра",
+  "Чукотский автономный округ",
+  "Ямало-Ненецкий автономный округ",
+] as const;
+
+const normalizeForComparison = (value: string): string =>
+  value.trim().toLocaleLowerCase("ru-RU");
+
+/** Нормализует только безопасные различия регистра и внешних пробелов. */
+export function findCanonicalRussianRegion(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+
+  const normalized = normalizeForComparison(value);
+  if (!normalized) return null;
+
+  return russianRegions.find(region => normalizeForComparison(region) === normalized) ?? null;
+}
+
+export function filterRussianRegions(query: string): readonly string[] {
+  const normalized = normalizeForComparison(query);
+  if (!normalized) return russianRegions;
+
+  return russianRegions.filter(region => normalizeForComparison(region).includes(normalized));
+}
diff --git a/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.spec.ts b/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.spec.ts
index 28a73c819..7557db54d 100644
--- a/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.spec.ts
+++ b/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.spec.ts
@@ -31,6 +31,17 @@ describe("project-form.factory", () => {
     expect(linkControl?.valid).toBe(true);
   });
 
+  it("не принимает произвольный регион нового проекта", () => {
+    const form = createProjectForm(fb);
+    const region = form.get("region")!;
+
+    region.setValue("Москва");
+    expect(region.valid).toBe(true);
+
+    region.setValue("Миксва");
+    expect(region.hasError("canonicalRegion")).toBe(true);
+  });
+
   it("создаёт группу достижения с fallback id и валидацией года", () => {
     const achievement = createProjectAchievementGroup(
       fb,
diff --git a/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.ts b/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.ts
index 896c016e3..8374ae843 100644
--- a/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.ts
+++ b/projects/social_platform/src/app/api/project/facades/edit/project-form.factory.ts
@@ -1,7 +1,14 @@
 /** @format */
 
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  ValidationErrors,
+  Validators,
+} from "@angular/forms";
 import { Project } from "@domain/project/project.model";
+import { findCanonicalRussianRegion } from "@core/consts/lists/russian-regions-list.const";
 
 type ProjectAchievement = Project["achievements"][number];
 
@@ -9,7 +16,7 @@ export function createProjectForm(fb: FormBuilder): FormGroup {
   return fb.group({
     imageAddress: [""],
     name: ["", [Validators.required]],
-    region: ["", [Validators.required]],
+    region: ["", [Validators.required, projectRegionValidator()]],
     implementationDeadline: [null],
     trl: [null],
     links: fb.array([]),
@@ -29,6 +36,19 @@ export function createProjectForm(fb: FormBuilder): FormGroup {
   });
 }
 
+export function projectRegionValidator(legacyValue = "") {
+  const normalizedLegacy = legacyValue.trim();
+
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = typeof control.value === "string" ? control.value.trim() : "";
+    if (!value) return null;
+    if (findCanonicalRussianRegion(value)) return null;
+    if (normalizedLegacy && value === normalizedLegacy) return null;
+
+    return { canonicalRegion: true };
+  };
+}
+
 export function createProjectAchievementGroup(
   fb: FormBuilder,
   achievement: Partial<ProjectAchievement>,
diff --git a/projects/social_platform/src/app/api/project/facades/edit/project-form.service.spec.ts b/projects/social_platform/src/app/api/project/facades/edit/project-form.service.spec.ts
index c96eb9c66..8bfc91dc5 100644
--- a/projects/social_platform/src/app/api/project/facades/edit/project-form.service.spec.ts
+++ b/projects/social_platform/src/app/api/project/facades/edit/project-form.service.spec.ts
@@ -87,4 +87,24 @@ describe("ProjectFormService", () => {
     expect(service.achievements.length).toBe(1);
     expect(service.achievements.at(0).get("title")?.value).toBe("Second");
   });
+
+  it("нормализует безопасные различия регистра и пробелов", () => {
+    const project = Project.default();
+    project.region = "  мОскВа ";
+
+    service.initializeProjectData(project);
+
+    expect(service.region?.value).toBe("Москва");
+    expect(service.region?.valid).toBe(true);
+  });
+
+  it("сохраняет неизвестное legacy-значение без потери при открытии формы", () => {
+    const project = Project.default();
+    project.region = "Миксва";
+
+    service.initializeProjectData(project);
+
+    expect(service.region?.value).toBe("Миксва");
+    expect(service.region?.valid).toBe(true);
+  });
 });
diff --git a/projects/social_platform/src/app/api/project/facades/edit/project-form.service.ts b/projects/social_platform/src/app/api/project/facades/edit/project-form.service.ts
index f6347df34..61ace91d1 100644
--- a/projects/social_platform/src/app/api/project/facades/edit/project-form.service.ts
+++ b/projects/social_platform/src/app/api/project/facades/edit/project-form.service.ts
@@ -12,8 +12,13 @@ import {
 import { PartnerProgramFields } from "@domain/program/partner-program-fields.model";
 import { stripNullish } from "@utils/stripNull";
 import { Project } from "@domain/project/project.model";
-import { createProjectAchievementGroup, createProjectForm } from "./project-form.factory";
+import {
+  createProjectAchievementGroup,
+  createProjectForm,
+  projectRegionValidator,
+} from "./project-form.factory";
 import { ProjectFormAutosaveService } from "./project-form-autosave.service";
+import { findCanonicalRussianRegion } from "@core/consts/lists/russian-regions-list.const";
 /** Управляет основной формой проекта и формой дополнительных полей партнерской программы. */
 @Injectable({ providedIn: "root" })
 export class ProjectFormService {
@@ -47,11 +52,18 @@ export class ProjectFormService {
   }
 
   public initializeProjectData(project: Project): void {
+    const rawRegion = typeof project.region === "string" ? project.region.trim() : "";
+    const canonicalRegion = findCanonicalRussianRegion(rawRegion);
+    this.region?.setValidators([
+      Validators.required,
+      projectRegionValidator(canonicalRegion ? "" : rawRegion),
+    ]);
+
     // Заполняем простые поля
     this.projectForm.patchValue({
       imageAddress: project.imageAddress,
       name: project.name,
-      region: project.region,
+      region: canonicalRegion ?? rawRegion,
       industryId: project.industry,
       description: project.description,
       implementationDeadline: project.implementationDeadline ?? null,
@@ -63,6 +75,7 @@ export class ProjectFormService {
       coverImageAddress: project.coverImageAddress,
       partnerProgramId: project.partnerProgram?.programId ?? null,
     });
+    this.region?.updateValueAndValidity({ emitEvent: false });
 
     if (project.partnerProgram) {
       this.relationId.set(project.partnerProgram?.programLinkId);
diff --git a/projects/social_platform/src/app/ui/pages/auth/login/login.component.html b/projects/social_platform/src/app/ui/pages/auth/login/login.component.html
index 465fcb939..6bdd0beea 100644
--- a/projects/social_platform/src/app/ui/pages/auth/login/login.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/login/login.component.html
@@ -3,7 +3,13 @@
 <div class="login">
   <div class="login__left">
     <div class="login__left-content">
-      <form class="auth" [formGroup]="loginForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
+      <form
+        class="auth"
+        [formGroup]="loginForm"
+        novalidate
+        (ngSubmit)="onSubmit()"
+        (keyup.enter)="onSubmit()"
+      >
         <div class="auth__wrapper">
           <img
             class="login__logo"
diff --git a/projects/social_platform/src/app/ui/pages/auth/login/login.component.spec.ts b/projects/social_platform/src/app/ui/pages/auth/login/login.component.spec.ts
index 56c2a996f..76f13dea3 100644
--- a/projects/social_platform/src/app/ui/pages/auth/login/login.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/login/login.component.spec.ts
@@ -73,5 +73,21 @@ describe("LoginComponent", () => {
     expect(password.autocomplete).toBe("current-password");
     expect(passwordField.classList).toContain("auth__password-input");
     expect(emailField.classList).not.toContain("auth__password-input");
+    expect((fixture.nativeElement.querySelector("form") as HTMLFormElement).noValidate).toBe(true);
+  });
+
+  it("keeps the custom password visibility control clickable", () => {
+    const password = fixture.nativeElement.querySelector(
+      'input[name="password"]',
+    ) as HTMLInputElement;
+    const toggle = password
+      .closest("app-input")
+      ?.querySelector(".field__right-icon i") as HTMLElement;
+
+    expect(password.type).toBe("password");
+    toggle.click();
+    fixture.detectChanges();
+
+    expect(password.type).toBe("text");
   });
 });
diff --git a/projects/social_platform/src/app/ui/pages/auth/register/register.component.html b/projects/social_platform/src/app/ui/pages/auth/register/register.component.html
index 716d91e1c..aa7d4674a 100644
--- a/projects/social_platform/src/app/ui/pages/auth/register/register.component.html
+++ b/projects/social_platform/src/app/ui/pages/auth/register/register.component.html
@@ -10,7 +10,7 @@
       decoding="async"
     />
   </div>
-  <form class="auth__wrapper" [formGroup]="registerForm" (ngSubmit)="onSendForm()">
+  <form class="auth__wrapper" [formGroup]="registerForm" novalidate (ngSubmit)="onSendForm()">
     <ng-container>
       <div class="auth__row">
         @if (registerForm.get("firstName"); as name) {
diff --git a/projects/social_platform/src/app/ui/pages/auth/register/register.component.spec.ts b/projects/social_platform/src/app/ui/pages/auth/register/register.component.spec.ts
index 96184958d..6b43160de 100644
--- a/projects/social_platform/src/app/ui/pages/auth/register/register.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/auth/register/register.component.spec.ts
@@ -73,5 +73,25 @@ describe("RegisterComponent", () => {
     expect(password.closest("app-input")?.classList).toContain("auth__password-input");
     expect(repeatedPassword.closest("app-input")?.classList).toContain("auth__password-input");
     expect(birthdayField.classList).not.toContain("auth__password-input");
+    expect((fixture.nativeElement.querySelector("form") as HTMLFormElement).noValidate).toBe(true);
+  });
+
+  it("keeps both custom password visibility controls clickable", () => {
+    const password = fixture.nativeElement.querySelector(
+      'input[name="new-password"]',
+    ) as HTMLInputElement;
+    const repeatedPassword = fixture.nativeElement.querySelector(
+      'input[name="new-password-confirmation"]',
+    ) as HTMLInputElement;
+
+    (password.closest("app-input")?.querySelector(".field__right-icon i") as HTMLElement).click();
+    fixture.detectChanges();
+    expect(password.type).toBe("text");
+
+    (
+      repeatedPassword.closest("app-input")?.querySelector(".field__right-icon i") as HTMLElement
+    ).click();
+    fixture.detectChanges();
+    expect(repeatedPassword.type).toBe("text");
   });
 });
diff --git a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
index eb86ad403..8e3d14a37 100644
--- a/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/profile/detail/main/components/profile-left-side/profile-left-side.component.scss
@@ -109,13 +109,20 @@
     background-color: var(--accent-light);
   }
 
+  /* stylelint-disable value-no-vendor-prefix */
   &__program-name {
+    display: -webkit-box;
     min-width: 0;
     overflow: hidden;
+    font-size: 12px;
     font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    line-height: 16px;
+    color: var(--black);
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
   }
+  /* stylelint-enable value-no-vendor-prefix */
 
   &__icon {
     color: var(--accent);
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 12930f5bb..71d97cf62 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
@@ -217,10 +217,10 @@ <h3 class="text-body-12 lists__title">проекты</h3>
               height="30"
             />
             <div class="lists__info">
-              <p class="text-body-10 lists__project-name">
+              <p class="lists__project-name">
                 {{ project.name }}
               </p>
-              <span class="text-body-6 lists__item">{{ project.collaborator?.role }}</span>
+              <span class="lists__project-role">{{ project.collaborator?.role }}</span>
             </div>
           </div>
         </ng-template>
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 8167e755c..1e566d3b0 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
@@ -116,11 +116,22 @@
   &__project-name {
     display: -webkit-box;
     overflow: hidden;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
     color: var(--black);
     overflow-wrap: anywhere;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+
+  &__project-role {
+    margin-top: 3px;
+    font-size: 11px;
+    line-height: 15px;
+    color: var(--dark-grey);
+    overflow-wrap: anywhere;
+  }
   /* stylelint-enable value-no-vendor-prefix */
 
   &__date {
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html
index 382021277..69837aecf 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.html
@@ -232,8 +232,10 @@ <h2 class="text-body-12">Кейсы</h2>
             (hide)="hideTooltip('cases')"
           ></app-tooltip>
         </div>
-        <div class="analytics-card__empty analytics-card__empty--center text-body-10">
-          <i appIcon icon="task" appSquare="28"></i>
+        <div
+          class="analytics-card__empty analytics-card__empty--center analytics-card__empty--cases text-body-12"
+        >
+          <i appIcon icon="task" appSquare="32"></i>
           <span>Статистика по кейсам пока недоступна</span>
         </div>
       </article>
@@ -241,8 +243,8 @@ <h2 class="text-body-12">Кейсы</h2>
       <article class="analytics-card evaluation" data-testid="evaluation-statuses">
         <div class="analytics__heading-row">
           <div>
-            <h2 class="text-body-12">Статус оценивания</h2>
-            <p class="evaluation__mode text-body-8">{{ evaluationModeLabel() }}</p>
+            <h2 class="analytics-card__title">Статус оценивания</h2>
+            <p class="evaluation__mode analytics-card__subtitle">{{ evaluationModeLabel() }}</p>
           </div>
           <app-tooltip
             [text]="
@@ -267,7 +269,7 @@ <h2 class="text-body-12">Статус оценивания</h2>
             }
           </ul>
           @if (overview.evaluationStatus.maxEvaluationsPerProject !== null) {
-            <div class="evaluation__limit text-body-8" data-testid="evaluation-limit">
+            <div class="evaluation__limit" data-testid="evaluation-limit">
               <span>
                 Максимум экспертов на проект:
                 <strong>{{ overview.evaluationStatus.maxEvaluationsPerProject }}</strong>
@@ -284,11 +286,11 @@ <h2 class="text-body-12">Статус оценивания</h2>
           }
           @if (overview.evaluationStatus.mode === "distributed") {
             <div class="evaluation__assignments" data-testid="assignment-statuses">
-              <h3 class="text-body-10">Назначения экспертов</h3>
+              <h3 class="analytics-card__section-label">Назначения экспертов</h3>
               <ul class="status-list status-list--compact">
                 @for (item of assignmentStatuses(); track item.key) {
                   <li>
-                    <span class="text-body-8">{{ item.label }}</span>
+                    <span>{{ item.label }}</span>
                     <strong>{{ item.value }}</strong>
                   </li>
                 }
@@ -341,8 +343,10 @@ <h2 class="text-body-12">Требует внимания</h2>
       <article class="activity" data-testid="activity-dynamics">
         <div class="analytics__heading-row">
           <div>
-            <h2 class="text-body-12">Динамика активности</h2>
-            <p class="activity__note text-body-8">Последние 30 дней</p>
+            <h2 class="analytics-card__title">Динамика активности</h2>
+            @if (hasActivity()) {
+              <p class="activity__note analytics-card__subtitle">Последние 30 дней</p>
+            }
           </div>
           <app-tooltip
             text="Ежедневные новые регистрации и отправленные решения за последние 30 дней."
@@ -408,7 +412,9 @@ <h2 class="text-body-12">Динамика активности</h2>
             </div>
           </div>
         } @else {
-          <p class="analytics-card__empty text-body-10">За последние 30 дней активности пока нет</p>
+          <p class="analytics-card__empty activity__empty text-body-12">
+            За последние 30 дней активности не было
+          </p>
         }
       </article>
     </section>
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
index 4b2414342..2e4160fc0 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.scss
@@ -52,6 +52,11 @@
       font-weight: 600;
       color: var(--black);
     }
+
+    h2 {
+      font-size: 16px;
+      line-height: 22px;
+    }
   }
 
   &__loading {
@@ -239,6 +244,38 @@
       justify-content: center;
       color: var(--dark-grey);
     }
+
+    &--cases {
+      width: min(100%, 300px);
+      min-height: 112px;
+      padding: 20px;
+      margin: auto;
+      line-height: 18px;
+      background: var(--light-gray);
+      border: 1px solid var(--medium-grey-for-outline);
+      border-radius: 12px;
+    }
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    color: var(--black);
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--dark-grey);
+  }
+
+  &__section-label {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 18px;
+    color: var(--black);
   }
 }
 
@@ -305,12 +342,16 @@
     border-radius: 8px;
 
     span {
+      font-size: 13px;
       font-weight: 500;
+      line-height: 18px;
       color: var(--black);
     }
 
     strong {
+      font-size: 17px;
       font-weight: 700;
+      line-height: 20px;
       color: var(--black);
     }
   }
@@ -346,7 +387,7 @@
   &__mode {
     margin-top: 2px;
     font-weight: 500;
-    color: var(--grey-for-text);
+    color: var(--dark-grey);
   }
 
   &__limit {
@@ -354,7 +395,9 @@
     gap: 6px;
     align-items: center;
     margin-top: 12px;
-    color: var(--grey-for-text);
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--dark-grey);
 
     strong {
       color: var(--black);
@@ -441,7 +484,15 @@
 .activity {
   &__note {
     margin-top: 2px;
-    color: var(--grey-for-text);
+    color: var(--dark-grey);
+  }
+
+  &__empty {
+    padding: 28px 16px;
+    margin: 24px 0 0;
+    color: var(--dark-grey);
+    background: var(--light-gray);
+    border-radius: 12px;
   }
 
   &__chart {
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.spec.ts b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.spec.ts
index 8baa7196b..94f0dd80a 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/analytics/analytics.component.spec.ts
@@ -146,6 +146,9 @@ describe("ProgramAnalyticsComponent", () => {
     );
 
     expect(evaluation?.textContent).toContain("Открытое оценивание");
+    expect(evaluation?.querySelector(".analytics-card__title")?.textContent).toContain(
+      "Статус оценивания",
+    );
     expect(evaluation?.textContent).toContain("Ожидают оценивания");
     expect(evaluation?.textContent).not.toContain("Частично оценено");
     expect(evaluation?.textContent).toContain("Максимум экспертов на проект");
@@ -257,8 +260,10 @@ describe("ProgramAnalyticsComponent", () => {
     expect(fixture.nativeElement.textContent).toContain("Пока нет сданных работ для оценивания");
     expect(fixture.nativeElement.textContent).toContain("Ничего не требует внимания");
     expect(fixture.nativeElement.querySelector(".attention__empty")).not.toBeNull();
-    expect(fixture.nativeElement.textContent).toContain("За последние 30 дней активности пока нет");
+    expect(fixture.nativeElement.textContent).toContain("За последние 30 дней активности не было");
+    expect(fixture.nativeElement.querySelector(".activity__note")).toBeNull();
     expect(fixture.nativeElement.textContent).toContain("Статистика по кейсам пока недоступна");
+    expect(fixture.nativeElement.querySelector(".analytics-card__empty--cases")).not.toBeNull();
   });
 
   it("показывает loading и recoverable error", () => {
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html
index 6227ab725..31ced1a27 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.html
@@ -1,6 +1,6 @@
 <!-- @format -->
 <div class="filter__titles">
-  <p class="text-body-14">фильтры</p>
+  <p class="text-body-14 filter__title">фильтры</p>
   <a class="text-body-12 filter__clear" (click)="clearFilters()">cбросить</a>
 </div>
 
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.scss b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.scss
index 718bb4c3a..3545efa86 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.scss
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.scss
@@ -45,7 +45,7 @@
     align-items: center;
 
     p {
-      color: var(--grey-for-text);
+      color: var(--black);
     }
   }
 
@@ -61,6 +61,8 @@
   }
 
   &__clear {
+    font-weight: 500;
+    color: var(--accent-dark);
     cursor: pointer;
   }
 
@@ -78,7 +80,7 @@
 
   &__name {
     margin-bottom: 6px;
-    color: var(--gray);
+    color: var(--dark-grey);
   }
 
   &__switch {
@@ -97,6 +99,8 @@
   }
 
   &__yes-no {
+    color: var(--dark-grey);
+
     &--active {
       color: var(--accent);
     }
@@ -123,7 +127,13 @@
       app-select {
         .field__input,
         li {
-          @include typography.body-10;
+          @include typography.body-12;
+
+          color: var(--black);
+        }
+
+        .field__input::placeholder {
+          color: var(--dark-grey);
         }
       }
     }
diff --git a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.spec.ts b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.spec.ts
index 3e72c70b3..ec1a1ed69 100644
--- a/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/program/detail/list/program-projects-filter/program-projects-filter.component.spec.ts
@@ -3,6 +3,7 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { provideRouter } from "@angular/router";
 import { signal } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { ProgramProjectsFilterComponent } from "./program-projects-filter.component";
 import { ProgramDetailListUIInfoService } from "@api/program/facades/detail/ui/program-detail-list-ui-info.service";
 import { ProgramProjectsFilterInfoService } from "./service/program-projects-filter-info.service";
@@ -10,6 +11,8 @@ import { ProgramProjectsFilterInfoService } from "./service/program-projects-fil
 describe("ProjectsFilterComponent", () => {
   let component: ProgramProjectsFilterComponent;
   let fixture: ComponentFixture<ProgramProjectsFilterComponent>;
+  const filters = signal<any[]>([]);
+  const filterForm = new FormBuilder().group({ caseDirection: [null] });
 
   beforeEach(async () => {
     const programDetailListUIInfoServiceSpy = {
@@ -17,8 +20,8 @@ describe("ProjectsFilterComponent", () => {
     };
 
     const programProjectsFilterInfoServiceSpy = {
-      filterForm: signal(null),
-      filters: signal([]),
+      filterForm,
+      filters,
       toggleAdditionalFormValues: vi.fn(),
       setValue: vi.fn(),
       clearFilters: vi.fn(),
@@ -57,4 +60,26 @@ describe("ProjectsFilterComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
+
+  it("renders the expert case filter with readable semantic classes", () => {
+    filters.set([
+      {
+        id: 1,
+        name: "caseDirection",
+        label: "Кейс",
+        helpText: "Выберите кейс",
+        fieldType: "select",
+        options: ["Цифровая трансформация"],
+      },
+    ]);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(".filter__title").textContent.trim()).toBe(
+      "фильтры",
+    );
+    expect(fixture.nativeElement.querySelector(".filter__clear").textContent.trim()).toBe(
+      "cбросить",
+    );
+    expect(fixture.nativeElement.querySelector(".filter__select app-select")).not.toBeNull();
+  });
 });
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html
index 36719859f..de3f56226 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.html
@@ -112,18 +112,20 @@
       @if (region; as region) {
         <fieldset>
           <label class="field-label text-body-12" for="region">регион</label>
-          <app-input
-            size="big"
+          <app-region-select
             id="region"
             formControlName="region"
             [error]="(region | controlError) || projSubmitInitiated()"
-            placeholder="введите регион"
-            [maxLength]="256"
-          ></app-input>
-          @if ((region | controlError: "required") || projSubmitInitiated()) {
+            placeholder="выберите регион"
+          ></app-region-select>
+          @if (region.hasError("required") && (region.touched || projSubmitInitiated())) {
             <div class="text-body-10 error">
               {{ errorMessage.VALIDATION_REQUIRED }}
             </div>
+          } @else if (
+            region.hasError("canonicalRegion") && (region.touched || projSubmitInitiated())
+          ) {
+            <div class="text-body-10 error">Выберите регион из списка</div>
           }
         </fieldset>
       }
@@ -423,7 +425,7 @@
 
   <div [formGroup]="projectForm">
     <div formArrayName="links">
-      @if (links.length) {
+      @if (hasLinks()) {
         <ul class="project__links--wrapper">
           @for (control of links.controls; track trackByIndex($index)) {
             <li class="project__links">
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.spec.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.spec.ts
new file mode 100644
index 000000000..c138cad52
--- /dev/null
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.spec.ts
@@ -0,0 +1,114 @@
+/** @format */
+
+import { signal } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormArray, FormBuilder } from "@angular/forms";
+import { provideRouter } from "@angular/router";
+import { of } from "rxjs";
+import { provideNgxMask } from "ngx-mask";
+import { ProjectContactsService } from "@api/project/facades/edit/project-contacts.service";
+import { ProjectFormService } from "@api/project/facades/edit/project-form.service";
+import { ProjectsEditInfoService } from "@api/project/facades/edit/projects-edit-info.service";
+import { ProjectsEditUIInfoService } from "@api/project/facades/edit/ui/projects-edit-ui-info.service";
+import { ProjectGoalsUIService } from "@api/project/facades/edit/ui/project-goals-ui.service";
+import { ProjectGoalService } from "@api/project/facades/edit/project-goals.service";
+import { ProjectTeamUIService } from "@api/project/facades/edit/ui/project-team-ui.service";
+import { ProjectMainStepComponent } from "./project-main-step.component";
+
+describe("ProjectMainStepComponent", () => {
+  let fixture: ComponentFixture<ProjectMainStepComponent>;
+  let links: FormArray;
+
+  beforeEach(async () => {
+    const fb = new FormBuilder();
+    const projectForm = fb.group({ links: fb.array([]), link: [""] });
+    const emptyProjectControls = {
+      name: null,
+      region: null,
+      industry: null,
+      description: null,
+      actuality: null,
+      implementationDeadline: null,
+      problem: null,
+      targetAudience: null,
+      trl: null,
+      partnerProgramId: null,
+      presentationAddress: null,
+      coverImageAddress: null,
+      imageAddress: null,
+    };
+    links = projectForm.get("links") as FormArray;
+
+    await TestBed.configureTestingModule({
+      imports: [ProjectMainStepComponent],
+      providers: [
+        provideRouter([]),
+        provideNgxMask(),
+        ProjectContactsService,
+        {
+          provide: ProjectFormService,
+          useValue: {
+            getForm: () => projectForm,
+            editIndex: signal<number | null>(null),
+            ...emptyProjectControls,
+          },
+        },
+        {
+          provide: ProjectsEditInfoService,
+          useValue: { projectForm, profileId: signal(1), industries$: of([]) },
+        },
+        {
+          provide: ProjectsEditUIInfoService,
+          useValue: { leaderId: signal<number | null>(null) },
+        },
+        {
+          provide: ProjectGoalService,
+          useValue: {
+            getForm: () => fb.group({}),
+            goals: fb.array([]),
+            goalName: null,
+            goalDate: null,
+            goalLeader: null,
+          },
+        },
+        {
+          provide: ProjectGoalsUIService,
+          useValue: {
+            hasGoals: signal(false),
+            goalItems: signal([]),
+            goalLeaderShowModal: signal(false),
+            activeGoalIndex: signal<number | null>(null),
+            selectedLeaderId: signal<number | null>(null),
+          },
+        },
+        {
+          provide: ProjectTeamUIService,
+          useValue: { collaborators: signal([]) },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProjectMainStepComponent);
+    fixture.detectChanges();
+  });
+
+  it("renders every new project contact input immediately", () => {
+    const addButton = Array.from(fixture.nativeElement.querySelectorAll("app-button")).find(
+      (button: Element) => button.textContent?.includes("добавить ссылку"),
+    ) as HTMLElement;
+
+    addButton.click();
+    fixture.detectChanges();
+    expect(links.length).toBe(1);
+    expect(fixture.nativeElement.querySelectorAll('[formarrayname="links"] app-input')).toHaveLength(
+      1,
+    );
+
+    addButton.click();
+    fixture.detectChanges();
+    expect(links.length).toBe(2);
+    expect(fixture.nativeElement.querySelectorAll('[formarrayname="links"] app-input')).toHaveLength(
+      2,
+    );
+  });
+});
diff --git a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts
index 63f3af871..711987149 100644
--- a/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts
+++ b/projects/social_platform/src/app/ui/pages/projects/edit/components/project-main-step/project-main-step.component.ts
@@ -24,6 +24,7 @@ import { ProjectGoalsUIService } from "@api/project/facades/edit/ui/project-goal
 import { ProjectGoalService } from "@api/project/facades/edit/project-goals.service";
 import { ProjectContactsService } from "@api/project/facades/edit/project-contacts.service";
 import { ProjectTeamUIService } from "@api/project/facades/edit/ui/project-team-ui.service";
+import { RegionSelectComponent } from "@ui/widgets/region-select/region-select.component";
 
 /** Шаг редактирования проекта: основная информация. */
 @Component({
@@ -46,6 +47,7 @@ import { ProjectTeamUIService } from "@api/project/facades/edit/ui/project-team-
     AvatarComponent,
     FormsModule,
     RouterLink,
+    RegionSelectComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.html b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.html
index e70f03a65..730573f4e 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.html
@@ -7,7 +7,7 @@
         <p class="text-body-12 lists__title">описание вакансии</p>
         <i appIcon icon="folder" class="lists__icon" appSquare="12"></i>
       </div>
-      <div class="text-body-10 about__text">
+      <div class="text-body-12 about__text">
         <p #descEl [innerHTML]="vacancy()!.description | parseLinks | parseBreaks"></p>
         @if (descriptionExpandable()) {
           <div
@@ -33,6 +33,7 @@
             <ul class="skills__list">
               @for (skill of requiredSkills.slice(0, 8); track $index) {
                 <app-tag
+                  class="skills__tag"
                   [color]="skill.category.name.includes('Soft') ? 'accent' : 'complete'"
                   [appearance]="skill.category.name.includes('Soft') ? 'inline' : 'outline'"
                   >{{ skill.name }}</app-tag
@@ -44,7 +45,7 @@
             @if (requiredSkills) {
               <ul class="skills__list">
                 @for (skill of requiredSkills.slice(0, 8); track $index) {
-                  <app-tag>{{ skill.name }}</app-tag>
+                  <app-tag class="skills__tag">{{ skill.name }}</app-tag>
                 }
               </ul>
             }
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss
index 34c561b45..906886560 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancies-left-side/vacancies-left-side.component.scss
@@ -1,4 +1,5 @@
 @use "styles/responsive";
+@use "styles/components/vacancy-skill";
 
 @mixin expandable-list {
   &__remaining {
@@ -55,7 +56,9 @@
       p {
         display: -webkit-box;
         overflow: hidden;
-        color: var(--black);
+        font-size: 12px;
+        line-height: 18px;
+        color: var(--black) !important;
         text-overflow: ellipsis;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 5;
@@ -101,9 +104,12 @@
       }
     }
 
-    ::ng-deep app-tag .tag p {
-      font-size: 10px;
-      line-height: 14px;
+    &__tag {
+      min-width: 0;
+
+      ::ng-deep .tag {
+        @include vacancy-skill.readable-tag;
+      }
     }
 
     @include expandable-list;
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html
index 6297688ff..57ebe829a 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.html
@@ -18,15 +18,22 @@ <h2 id="vacancy-responses-title" class="text-body-14 responses__title">откл
         <article class="response">
           @if (response.user; as user) {
             <header class="response__candidate">
-              <app-avatar [size]="52" [url]="user.avatar ?? ''"></app-avatar>
-              <div>
-                <h3 class="text-body-14 response__name">
-                  {{ user.firstName }} {{ user.lastName }}
-                </h3>
-                @if (user.specialization?.name; as specialization) {
-                  <p class="text-body-12 response__specialization">{{ specialization }}</p>
-                }
+              <div class="response__identity">
+                <app-avatar [size]="52" [url]="user.avatar ?? ''"></app-avatar>
+                <div>
+                  <h3 class="text-body-14 response__name">
+                    {{ user.firstName }} {{ user.lastName }}
+                  </h3>
+                  @if (user.specialization?.name; as specialization) {
+                    <p class="text-body-12 response__specialization">{{ specialization }}</p>
+                  }
+                </div>
               </div>
+              @if (response.datetimeCreated) {
+                <p class="text-body-10 response__date">
+                  Отклик от {{ response.datetimeCreated | date: "dd.MM.yyyy" }}
+                </p>
+              }
             </header>
 
             @if (user.skills.length) {
@@ -56,12 +63,6 @@ <h4 class="text-body-12 response__label">Сопроводительное пис
             </div>
           }
 
-          @if (response.datetimeCreated) {
-            <p class="text-body-10 response__date">
-              Отклик от {{ response.datetimeCreated | date: "dd.MM.yyyy" }}
-            </p>
-          }
-
           @if (response.isApproved === null) {
             <p class="text-body-12 response__status">Ожидает решения</p>
             <div class="response__actions">
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
index b9f8cab90..f2fb45d72 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.scss
@@ -1,6 +1,7 @@
 /** @format */
 
 @use "styles/responsive";
+@use "styles/components/vacancy-skill";
 
 .responses {
   width: min(760px, calc(100vw - 48px));
@@ -41,9 +42,17 @@
   border-radius: var(--rounded-lg);
 
   &__candidate {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &__identity {
     display: flex;
     gap: 12px;
     align-items: center;
+    min-width: 0;
   }
 
   &__name {
@@ -58,7 +67,13 @@
   &__specialization,
   &__date {
     margin-top: 4px;
-    color: var(--grey-for-text);
+    color: var(--dark-grey);
+  }
+
+  &__date {
+    flex: 0 0 auto;
+    margin-top: 0;
+    text-align: right;
   }
 
   &__skills {
@@ -75,7 +90,9 @@
   }
 
   &__skill {
-    color: var(--accent);
+    @include vacancy-skill.readable-inline-tag;
+
+    color: var(--accent-dark);
     background: var(--accent-light);
   }
 
@@ -93,7 +110,8 @@
   }
 
   &__file-label {
-    color: var(--grey-for-text);
+    font-weight: 500;
+    color: var(--black);
   }
 
   &__file {
@@ -121,4 +139,14 @@
   @include responsive.apply-desktop {
     padding: 20px;
   }
+
+  @media screen and (max-width: 520px) {
+    &__candidate {
+      flex-direction: column;
+    }
+
+    &__date {
+      align-self: flex-end;
+    }
+  }
 }
diff --git a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.spec.ts b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.spec.ts
index 851e95e37..7df033126 100644
--- a/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.spec.ts
+++ b/projects/social_platform/src/app/ui/pages/vacancies/detail/info/components/vacancy-responses/vacancy-responses.component.spec.ts
@@ -52,6 +52,24 @@ describe("VacancyResponsesComponent", () => {
     expect(element.textContent).toContain("отклонить");
   });
 
+  it("показывает дату отклика в правой части header карточки", () => {
+    const element = render([response(null)]);
+    const header = element.querySelector(".response__candidate") as HTMLElement;
+    const date = header.querySelector(".response__date") as HTMLElement;
+
+    expect(date.textContent).toContain("Отклик от 27.08.2026");
+    expect(element.querySelector(".response > .response__date")).toBeNull();
+  });
+
+  it("сохраняет полное длинное название навыка в читаемом chip", () => {
+    const longSkill = "Проектирование сложных пользовательских сценариев";
+    const item = response(null);
+    item.user!.skills = [{ id: 9, name: longSkill }];
+    const element = render([item]);
+
+    expect(element.querySelector(".response__skill")?.textContent?.trim()).toBe(longSkill);
+  });
+
   it.each([
     [true, "Принят"],
     [false, "Отклонён"],
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 03aea6457..38b5b2255 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
@@ -44,7 +44,7 @@
       <app-tag
         [appearance]="skill.category.name.includes('Soft skills') ? 'outline' : 'inline'"
         [color]="skill.category.name.includes('Soft skills') ? 'soft' : 'complete'"
-        class="text-body-6 vacancy__skill"
+        class="vacancy__skill"
         >{{ skill.name }}</app-tag
       >
     }
@@ -75,6 +75,7 @@
     >
     @if (type() === "vacancies" && vacancy().canManageResponses) {
       <app-button
+        class="vacancy__primary-action"
         [routerLink]="AppRoutes.office.vacancy(vacancy().id)"
         [queryParams]="{ manageResponses: true }"
         size="medium"
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 735a88788..e5bc71a81 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
@@ -1,3 +1,5 @@
+@use "styles/components/vacancy-skill";
+
 .vacancy {
   padding: 24px;
   border: 0.5px solid var(--medium-grey-for-outline);
@@ -81,17 +83,25 @@
 
   &__actions {
     display: flex;
+    flex-wrap: wrap;
     gap: 20px;
     align-items: center;
     justify-content: space-between;
 
-    &--vacancies {
-      ::ng-deep {
-        app-button {
-          button {
-            width: 131px;
-          }
-        }
+    ::ng-deep app-button .button {
+      min-height: 42px;
+      padding: 10px 18px;
+    }
+
+    &--vacancies app-button {
+      flex: 1 1 140px;
+    }
+
+    @media screen and (max-width: 420px) {
+      gap: 10px;
+
+      app-button {
+        flex-basis: 100%;
       }
     }
   }
@@ -105,6 +115,12 @@
   }
 
   &__skill {
+    min-width: 0;
+
+    ::ng-deep .tag {
+      @include vacancy-skill.readable-tag;
+    }
+
     &--more {
       color: var(--accent);
     }
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 66cb32c5b..b4d7e7191 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
@@ -100,6 +100,22 @@ describe("ProjectVacancyCardComponent", () => {
       .find(element => element.nativeElement.textContent.includes("посмотреть отклики"));
 
     expect(managerLink?.injector.get(RouterLink).queryParams).toEqual({ manageResponses: true });
+    expect(managerLink?.nativeElement.classList).toContain("vacancy__primary-action");
+  });
+
+  it("keeps the complete skill name in a dedicated readable tag", () => {
+    const skillName = "Проектирование пользовательских интерфейсов";
+    fixture.componentRef.setInput("vacancy", {
+      id: 1,
+      role: "Designer",
+      description: "",
+      requiredSkills: [{ id: 2, name: skillName, category: { name: "Hard skills" } }],
+      salary: "100000",
+    });
+    fixture.detectChanges();
+
+    const skill = fixture.nativeElement.querySelector("app-tag.vacancy__skill") as HTMLElement;
+    expect(skill.textContent?.trim()).toBe(skillName);
   });
 
   it.each([
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html
new file mode 100644
index 000000000..06265e48a
--- /dev/null
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.html
@@ -0,0 +1,51 @@
+<!-- @format -->
+
+<div class="region-select" (focusout)="onFocusOut($event)">
+  <div class="region-select__control" [class.region-select__control--error]="error()">
+    <input
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-label="Регион проекта"
+      [id]="id()"
+      [value]="query()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="id() + '-options'"
+      [attr.aria-activedescendant]="open() && options().length ? id() + '-option-' + activeIndex() : null"
+      (focus)="onFocus()"
+      (input)="onInput($event)"
+      (keydown)="onKeydown($event)"
+    />
+    @if (query()) {
+      <button type="button" class="region-select__clear" aria-label="Очистить регион" (click)="clear($event)">
+        <i appIcon icon="cross" appSquare="14"></i>
+      </button>
+    }
+  </div>
+
+  @if (legacyValue(); as legacy) {
+    <p class="region-select__legacy text-body-10">
+      Текущее значение: <strong>{{ legacy }}</strong>. Выберите корректный регион из списка.
+    </p>
+  }
+
+  @if (open()) {
+    <ul class="region-select__options" [id]="id() + '-options'" role="listbox">
+      @for (option of options(); track option; let index = $index) {
+        <li
+          role="option"
+          [id]="id() + '-option-' + index"
+          [attr.aria-selected]="selectedValue() === option"
+          [class.region-select__option--active]="activeIndex() === index"
+        >
+          <button type="button" (click)="selectRegion(option)">{{ option }}</button>
+        </li>
+      } @empty {
+        <li class="region-select__empty text-body-12">Ничего не найдено</li>
+      }
+    </ul>
+  }
+</div>
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
new file mode 100644
index 000000000..e90ded2d0
--- /dev/null
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.scss
@@ -0,0 +1,102 @@
+/** @format */
+
+.region-select {
+  position: relative;
+  width: 100%;
+
+  &__control {
+    position: relative;
+
+    input {
+      width: 100%;
+      padding: 12px 44px 12px 12px;
+      font-size: 12px;
+      line-height: 16px;
+      color: var(--black);
+      background: var(--white);
+      border: 0.5px solid var(--gray);
+      border-radius: var(--rounded-xxl);
+      outline: none;
+
+      &::placeholder {
+        color: var(--dark-grey);
+      }
+
+      &:focus {
+        border-color: var(--accent);
+        box-shadow: 0 0 6px rgb(109 40 255 / 30%);
+      }
+    }
+
+    &--error input {
+      border-color: var(--red);
+    }
+  }
+
+  &__clear {
+    position: absolute;
+    top: 50%;
+    right: 14px;
+    display: grid;
+    place-items: center;
+    padding: 4px;
+    color: var(--dark-grey);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    transform: translateY(-50%);
+  }
+
+  &__legacy {
+    margin-top: 6px;
+    line-height: 15px;
+    color: var(--dark-grey);
+
+    strong {
+      color: var(--black);
+    }
+  }
+
+  &__options {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    left: 0;
+    z-index: 20;
+    max-height: 260px;
+    padding: 6px;
+    overflow-y: auto;
+    background: var(--white);
+    border: 1px solid var(--medium-grey-for-outline);
+    border-radius: 12px;
+    box-shadow: 5px 5px 25px 0 var(--gray-for-shadow);
+
+    li {
+      border-radius: 8px;
+    }
+
+    button {
+      width: 100%;
+      padding: 9px 10px;
+      font-size: 12px;
+      line-height: 16px;
+      color: var(--black);
+      text-align: left;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      border-radius: inherit;
+    }
+  }
+
+  &__option--active,
+  &__options li:hover {
+    background: var(--accent-light);
+  }
+
+  &__empty {
+    padding: 12px;
+    color: var(--dark-grey);
+    text-align: center;
+  }
+}
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts
new file mode 100644
index 000000000..3c39df368
--- /dev/null
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts
@@ -0,0 +1,87 @@
+/** @format */
+
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { RegionSelectComponent } from "./region-select.component";
+
+@Component({
+  imports: [ReactiveFormsModule, RegionSelectComponent],
+  template: `<app-region-select [formControl]="region"></app-region-select>`,
+})
+class RegionSelectHostComponent {
+  readonly region = new FormControl("");
+}
+
+describe("RegionSelectComponent", () => {
+  let fixture: ComponentFixture<RegionSelectHostComponent>;
+  let host: RegionSelectHostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [RegionSelectHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(RegionSelectHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("filters and selects a canonical region", () => {
+    const input = fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
+    input.dispatchEvent(new FocusEvent("focus"));
+    input.value = "татар";
+    input.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+
+    const option = fixture.debugElement.query(By.css('[role="option"] button'));
+    expect(option.nativeElement.textContent.trim()).toBe("Республика Татарстан");
+
+    option.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(host.region.value).toBe("Республика Татарстан");
+  });
+
+  it("supports keyboard selection", () => {
+    const input = fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
+    input.dispatchEvent(new FocusEvent("focus"));
+    input.value = "моск";
+    input.dispatchEvent(new Event("input"));
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+    fixture.detectChanges();
+
+    expect(host.region.value).toBe("Московская область");
+  });
+
+  it("shows an unknown legacy value without replacing it", () => {
+    host.region.setValue("Миксва");
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(".region-select__legacy").textContent).toContain(
+      "Текущее значение: Миксва",
+    );
+    expect(host.region.value).toBe("Миксва");
+  });
+
+  it("does not write arbitrary search text to the form", () => {
+    const input = fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
+    input.dispatchEvent(new FocusEvent("focus"));
+    input.value = "Новый случайный регион";
+    input.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+
+    expect(host.region.value).toBe("");
+    expect(fixture.nativeElement.querySelector(".region-select__empty").textContent).toContain(
+      "Ничего не найдено",
+    );
+  });
+
+  it("clears the selected region", () => {
+    host.region.setValue("Москва");
+    fixture.detectChanges();
+
+    (fixture.nativeElement.querySelector(".region-select__clear") as HTMLButtonElement).click();
+    fixture.detectChanges();
+
+    expect(host.region.value).toBe("");
+  });
+});
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
new file mode 100644
index 000000000..cdf28cd38
--- /dev/null
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
@@ -0,0 +1,147 @@
+/** @format */
+
+import { CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  forwardRef,
+  input,
+  signal,
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import {
+  filterRussianRegions,
+  findCanonicalRussianRegion,
+} from "@core/consts/lists/russian-regions-list.const";
+import { IconComponent } from "@ui/primitives/icon/icon.component";
+
+@Component({
+  selector: "app-region-select",
+  imports: [CommonModule, IconComponent],
+  templateUrl: "./region-select.component.html",
+  styleUrl: "./region-select.component.scss",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RegionSelectComponent),
+      multi: true,
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RegionSelectComponent implements ControlValueAccessor {
+  readonly id = input("region");
+  readonly placeholder = input("Выберите регион");
+  readonly error = input(false);
+
+  protected readonly query = signal("");
+  protected readonly selectedValue = signal("");
+  protected readonly legacyValue = signal<string | null>(null);
+  protected readonly options = signal<readonly string[]>(filterRussianRegions(""));
+  protected readonly open = signal(false);
+  protected readonly activeIndex = signal(0);
+  protected readonly disabled = signal(false);
+
+  private readonly elementRef: ElementRef<HTMLElement>;
+
+  constructor(elementRef: ElementRef<HTMLElement>) {
+    this.elementRef = elementRef;
+  }
+
+  protected onFocus(): void {
+    if (this.disabled()) return;
+    this.updateOptions(this.query());
+    this.open.set(true);
+  }
+
+  protected onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.query.set(value);
+    this.updateOptions(value);
+    this.open.set(true);
+  }
+
+  protected selectRegion(region: string): void {
+    this.selectedValue.set(region);
+    this.query.set(region);
+    this.legacyValue.set(null);
+    this.open.set(false);
+    this.onChange(region);
+    this.onTouched();
+  }
+
+  protected clear(event: Event): void {
+    event.stopPropagation();
+    this.selectedValue.set("");
+    this.query.set("");
+    this.legacyValue.set(null);
+    this.updateOptions("");
+    this.open.set(true);
+    this.onChange("");
+    this.onTouched();
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    const options = this.options();
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.open.set(true);
+      this.activeIndex.update(index => Math.min(index + 1, Math.max(options.length - 1, 0)));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      this.activeIndex.update(index => Math.max(index - 1, 0));
+    } else if (event.key === "Enter" && this.open() && options.length) {
+      event.preventDefault();
+      this.selectRegion(options[this.activeIndex()]);
+    } else if (event.key === "Escape") {
+      this.open.set(false);
+      this.restoreSelectedDisplayValue();
+    }
+  }
+
+  protected onFocusOut(event: FocusEvent): void {
+    const nextTarget = event.relatedTarget as Node | null;
+    if (nextTarget && this.elementRef.nativeElement.contains(nextTarget)) return;
+
+    this.open.set(false);
+    this.restoreSelectedDisplayValue();
+    this.onTouched();
+  }
+
+  writeValue(value: string | null): void {
+    const trimmed = typeof value === "string" ? value.trim() : "";
+    const canonical = findCanonicalRussianRegion(trimmed);
+
+    this.selectedValue.set(canonical ?? trimmed);
+    this.query.set(canonical ?? trimmed);
+    this.legacyValue.set(trimmed && !canonical ? trimmed : null);
+    this.updateOptions("");
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  private updateOptions(query: string): void {
+    this.options.set(filterRussianRegions(query));
+    this.activeIndex.set(0);
+  }
+
+  private restoreSelectedDisplayValue(): void {
+    this.query.set(this.selectedValue());
+    this.updateOptions("");
+  }
+
+  private onChange: (value: string) => void = () => {};
+  private onTouched: () => void = () => {};
+}
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 ae8efb69c..919cb0d2b 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
@@ -16,14 +16,18 @@ <h3 class="text-body-12 vacancy__role">{{ vacancy()!.role }}</h3>
       <div class="vacancy__skills">
         @if (vacancy()!.requiredSkills.length) {
           @for (skill of vacancy()!.requiredSkills.slice(0, 5); track $index) {
-            <app-tag [appearance]="skill.category.name.includes('Soft') ? 'inline' : 'outline'">{{
-              skill.name
-            }}</app-tag>
+            <app-tag
+              class="vacancy__skill"
+              [appearance]="skill.category.name.includes('Soft') ? 'inline' : 'outline'"
+              >{{ skill.name }}</app-tag
+            >
 
             @if (vacancy()!.specialization) {
-              <app-tag [appearance]="skill.category.name.includes('Soft') ? 'inline' : 'outline'">{{
-                vacancy()!.specialization ? vacancy()!.specialization : ""
-              }}</app-tag>
+              <app-tag
+                class="vacancy__skill"
+                [appearance]="skill.category.name.includes('Soft') ? 'inline' : 'outline'"
+                >{{ vacancy()!.specialization ? vacancy()!.specialization : "" }}</app-tag
+              >
             }
           }
           @if (vacancy()!.requiredSkills.length > 5) {
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 38bd99d82..73ffb656b 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
@@ -1,5 +1,7 @@
 /** @format */
 
+@use "styles/components/vacancy-skill";
+
 .vacancy {
   &__requirements {
     padding: 5px 40px;
@@ -42,6 +44,14 @@
     align-items: center;
   }
 
+  &__skill {
+    min-width: 0;
+
+    ::ng-deep .tag {
+      @include vacancy-skill.readable-tag;
+    }
+  }
+
   /* stylelint-disable value-no-vendor-prefix */
   &__role {
     display: -webkit-box;
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 5d547b70a..597255e01 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
@@ -66,4 +66,16 @@ describe("VacancyCardComponent", () => {
 
     expect(fixture.nativeElement.querySelector(".vacancy__role").textContent.trim()).toBe(longRole);
   });
+
+  it("показывает полное название навыка в readable tag", () => {
+    const skillName = "Управление распределённой командой разработки";
+    fixture.componentRef.setInput("vacancy", {
+      ...createVacancy(true),
+      requiredSkills: [{ id: 4, name: skillName, category: { name: "Soft skills" } }],
+    });
+    fixture.detectChanges();
+
+    const skill = fixture.nativeElement.querySelector("app-tag.vacancy__skill") as HTMLElement;
+    expect(skill.textContent?.trim()).toBe(skillName);
+  });
 });
diff --git a/projects/social_platform/src/styles/components/_vacancy-skill.scss b/projects/social_platform/src/styles/components/_vacancy-skill.scss
new file mode 100644
index 000000000..37da95d13
--- /dev/null
+++ b/projects/social_platform/src/styles/components/_vacancy-skill.scss
@@ -0,0 +1,25 @@
+@mixin readable-tag {
+  max-width: 100%;
+  min-height: 26px;
+  padding: 5px 10px;
+
+  p {
+    margin: 0;
+    overflow: visible;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    text-overflow: clip;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+}
+
+@mixin readable-inline-tag {
+  max-width: 100%;
+  min-height: 26px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 16px;
+  overflow-wrap: anywhere;
+}
diff --git a/projects/social_platform/src/styles/pages/auth.scss b/projects/social_platform/src/styles/pages/auth.scss
index 0b8926dc9..009016c21 100644
--- a/projects/social_platform/src/styles/pages/auth.scss
+++ b/projects/social_platform/src/styles/pages/auth.scss
@@ -69,14 +69,20 @@
   &__password-input {
     ::ng-deep {
       .field__input {
-        padding-right: 72px;
+        padding-right: 104px;
       }
 
       .field__right-icon {
-        right: 18px !important;
-        z-index: 2;
+        right: 52px !important;
+        z-index: 4;
         padding: 3px 0 3px 8px;
+        pointer-events: none;
         background-color: var(--white);
+
+        i {
+          pointer-events: auto;
+          cursor: pointer;
+        }
       }
     }
   }

From da24c5c212c81994823f488f33a2659d9e49486c Mon Sep 17 00:00:00 2001
From: Fedor <Peter252005@yandex.ru>
Date: Wed, 2 Sep 2026 10:58:09 +0300
Subject: [PATCH 2/2] Fix region selector committed value handling

---
 .../lists/russian-regions-list.const.spec.ts  |  6 ++
 .../lists/russian-regions-list.const.ts       | 30 +++++-
 .../region-select.component.spec.ts           | 98 ++++++++++++++++---
 .../region-select/region-select.component.ts  | 19 +++-
 4 files changed, 134 insertions(+), 19 deletions(-)

diff --git a/projects/core/src/consts/lists/russian-regions-list.const.spec.ts b/projects/core/src/consts/lists/russian-regions-list.const.spec.ts
index 81572ada2..4d5d885b0 100644
--- a/projects/core/src/consts/lists/russian-regions-list.const.spec.ts
+++ b/projects/core/src/consts/lists/russian-regions-list.const.spec.ts
@@ -28,4 +28,10 @@ describe("russianRegions", () => {
   it("filters by a case-insensitive substring", () => {
     expect(filterRussianRegions("  татар ")).toEqual(["Республика Татарстан"]);
   });
+
+  it("ranks exact, prefix and substring matches deterministically", () => {
+    expect(filterRussianRegions("моск").slice(0, 2)).toEqual(["Москва", "Московская область"]);
+    expect(filterRussianRegions("Москов")).toEqual(["Московская область"]);
+    expect(filterRussianRegions("Москва")).toEqual(["Москва"]);
+  });
 });
diff --git a/projects/core/src/consts/lists/russian-regions-list.const.ts b/projects/core/src/consts/lists/russian-regions-list.const.ts
index 389c19ea1..8a3611c74 100644
--- a/projects/core/src/consts/lists/russian-regions-list.const.ts
+++ b/projects/core/src/consts/lists/russian-regions-list.const.ts
@@ -1,4 +1,9 @@
-/** Канонические display-названия субъектов РФ для формы проекта. */
+/**
+ * Канонические display-названия субъектов РФ для формы проекта.
+ *
+ * @format
+ */
+
 export const russianRegions = [
   "Республика Адыгея",
   "Республика Алтай",
@@ -91,8 +96,7 @@ export const russianRegions = [
   "Ямало-Ненецкий автономный округ",
 ] as const;
 
-const normalizeForComparison = (value: string): string =>
-  value.trim().toLocaleLowerCase("ru-RU");
+const normalizeForComparison = (value: string): string => value.trim().toLocaleLowerCase("ru-RU");
 
 /** Нормализует только безопасные различия регистра и внешних пробелов. */
 export function findCanonicalRussianRegion(value: unknown): string | null {
@@ -108,5 +112,23 @@ export function filterRussianRegions(query: string): readonly string[] {
   const normalized = normalizeForComparison(query);
   if (!normalized) return russianRegions;
 
-  return russianRegions.filter(region => normalizeForComparison(region).includes(normalized));
+  return russianRegions
+    .filter(region => normalizeForComparison(region).includes(normalized))
+    .sort((first, second) => {
+      const firstNormalized = normalizeForComparison(first);
+      const secondNormalized = normalizeForComparison(second);
+      const getRank = (region: string): number => {
+        if (region === normalized) return 0;
+        if (region.startsWith(normalized)) return 1;
+        return 2;
+      };
+      const rankDifference = getRank(firstNormalized) - getRank(secondNormalized);
+
+      if (rankDifference !== 0) return rankDifference;
+
+      const lengthDifference = firstNormalized.length - secondNormalized.length;
+      if (lengthDifference !== 0) return lengthDifference;
+
+      return first.localeCompare(second, "ru-RU");
+    });
 }
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts
index 3c39df368..59d87f0e9 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.spec.ts
@@ -19,18 +19,28 @@ describe("RegionSelectComponent", () => {
   let host: RegionSelectHostComponent;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({ imports: [RegionSelectHostComponent] }).compileComponents();
+    await TestBed.configureTestingModule({
+      imports: [RegionSelectHostComponent],
+    }).compileComponents();
     fixture = TestBed.createComponent(RegionSelectHostComponent);
     host = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it("filters and selects a canonical region", () => {
-    const input = fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
-    input.dispatchEvent(new FocusEvent("focus"));
-    input.value = "татар";
+  const getInput = (): HTMLInputElement =>
+    fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
+
+  const typeQuery = (value: string): void => {
+    const input = getInput();
+    input.value = value;
     input.dispatchEvent(new Event("input"));
     fixture.detectChanges();
+  };
+
+  it("filters and selects a canonical region", () => {
+    const input = getInput();
+    input.dispatchEvent(new FocusEvent("focus"));
+    typeQuery("татар");
 
     const option = fixture.debugElement.query(By.css('[role="option"] button'));
     expect(option.nativeElement.textContent.trim()).toBe("Республика Татарстан");
@@ -42,32 +52,72 @@ describe("RegionSelectComponent", () => {
   });
 
   it("supports keyboard selection", () => {
-    const input = fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
+    const input = getInput();
     input.dispatchEvent(new FocusEvent("focus"));
-    input.value = "моск";
-    input.dispatchEvent(new Event("input"));
+    typeQuery("моск");
     input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
     fixture.detectChanges();
 
-    expect(host.region.value).toBe("Московская область");
+    expect(host.region.value).toBe("Москва");
+  });
+
+  it("clears a committed region while searching and commits only a selected replacement", () => {
+    host.region.setValue("Москва");
+    fixture.detectChanges();
+
+    typeQuery("татар");
+
+    expect(getInput().value).toBe("татар");
+    expect(host.region.value).toBe("");
+
+    const option = fixture.debugElement.query(By.css('[role="option"] button'));
+    option.nativeElement.click();
+    fixture.detectChanges();
+
+    expect(getInput().value).toBe("Республика Татарстан");
+    expect(host.region.value).toBe("Республика Татарстан");
+  });
+
+  it("clears a committed region when the input is manually emptied", () => {
+    host.region.setValue("Москва");
+    fixture.detectChanges();
+
+    typeQuery("");
+
+    expect(host.region.value).toBe("");
   });
 
   it("shows an unknown legacy value without replacing it", () => {
     host.region.setValue("Миксва");
     fixture.detectChanges();
 
+    const input = getInput();
+    input.dispatchEvent(new FocusEvent("focus"));
+    input.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    fixture.detectChanges();
+
     expect(fixture.nativeElement.querySelector(".region-select__legacy").textContent).toContain(
       "Текущее значение: Миксва",
     );
+    expect(input.value).toBe("Миксва");
     expect(host.region.value).toBe("Миксва");
   });
 
+  it("clears an unknown legacy value when replacement search starts", () => {
+    host.region.setValue("Миксва");
+    fixture.detectChanges();
+
+    typeQuery("моск");
+
+    expect(getInput().value).toBe("моск");
+    expect(host.region.value).toBe("");
+    expect(fixture.nativeElement.querySelector(".region-select__legacy")).toBeNull();
+  });
+
   it("does not write arbitrary search text to the form", () => {
-    const input = fixture.nativeElement.querySelector('[role="combobox"]') as HTMLInputElement;
+    const input = getInput();
     input.dispatchEvent(new FocusEvent("focus"));
-    input.value = "Новый случайный регион";
-    input.dispatchEvent(new Event("input"));
-    fixture.detectChanges();
+    typeQuery("Новый случайный регион");
 
     expect(host.region.value).toBe("");
     expect(fixture.nativeElement.querySelector(".region-select__empty").textContent).toContain(
@@ -84,4 +134,26 @@ describe("RegionSelectComponent", () => {
 
     expect(host.region.value).toBe("");
   });
+
+  it("orders Moscow before Moscow Oblast for a common prefix", () => {
+    typeQuery("моск");
+
+    const options = Array.from(
+      fixture.nativeElement.querySelectorAll('[role="option"] button'),
+      (option: Element) => option.textContent?.trim(),
+    );
+
+    expect(options.slice(0, 2)).toEqual(["Москва", "Московская область"]);
+  });
+
+  it("keeps deterministic results for a longer Moscow query", () => {
+    typeQuery("Москов");
+
+    const options = Array.from(
+      fixture.nativeElement.querySelectorAll('[role="option"] button'),
+      (option: Element) => option.textContent?.trim(),
+    );
+
+    expect(options).toEqual(["Московская область"]);
+  });
 });
diff --git a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
index cdf28cd38..2cd10b788 100644
--- a/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
+++ b/projects/social_platform/src/app/ui/widgets/region-select/region-select.component.ts
@@ -57,6 +57,8 @@ export class RegionSelectComponent implements ControlValueAccessor {
 
   protected onInput(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
+
+    this.clearCommittedValueWhenSearchChanges(value);
     this.query.set(value);
     this.updateOptions(value);
     this.open.set(true);
@@ -114,7 +116,7 @@ export class RegionSelectComponent implements ControlValueAccessor {
     const trimmed = typeof value === "string" ? value.trim() : "";
     const canonical = findCanonicalRussianRegion(trimmed);
 
-    this.selectedValue.set(canonical ?? trimmed);
+    this.selectedValue.set(canonical ?? "");
     this.query.set(canonical ?? trimmed);
     this.legacyValue.set(trimmed && !canonical ? trimmed : null);
     this.updateOptions("");
@@ -138,10 +140,23 @@ export class RegionSelectComponent implements ControlValueAccessor {
   }
 
   private restoreSelectedDisplayValue(): void {
-    this.query.set(this.selectedValue());
+    this.query.set(this.selectedValue() || this.legacyValue() || "");
     this.updateOptions("");
   }
 
+  private clearCommittedValueWhenSearchChanges(query: string): void {
+    const selected = this.selectedValue();
+    const legacy = this.legacyValue();
+    const queryMatchesSelected = selected && findCanonicalRussianRegion(query) === selected;
+    const queryMatchesLegacy = legacy && query === legacy;
+
+    if ((!selected && !legacy) || queryMatchesSelected || queryMatchesLegacy) return;
+
+    this.selectedValue.set("");
+    this.legacyValue.set(null);
+    this.onChange("");
+  }
+
   private onChange: (value: string) => void = () => {};
   private onTouched: () => void = () => {};
 }