From 2f32df0b1a6fe9eb93857b740f46d5f38105e9b0 Mon Sep 17 00:00:00 2001
From: Sergey Karmanov <ppoocpel8888@gmail.com>
Date: Sat, 16 May 2026 11:38:14 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20=D0=BF=D0=BE=D1=87=D0=B8=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ui/FilterChips.vue | 18 +++++-
 frontend/src/components/ui/LectureCard.vue | 67 ++++++++++++++++------
 frontend/src/views/student/CatalogView.vue | 23 ++++----
 3 files changed, 77 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/ui/FilterChips.vue b/frontend/src/components/ui/FilterChips.vue
index ecf52b1..3f06faf 100644
--- a/frontend/src/components/ui/FilterChips.vue
+++ b/frontend/src/components/ui/FilterChips.vue
@@ -20,5 +20,21 @@ const emit = defineEmits<{ toggle: [value: string] }>()
 </template>
 
 <style scoped>
-.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.tag-chip {
+  max-width: 100%;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  text-align: left;
+  line-height: 1.25;
+}
 </style>
diff --git a/frontend/src/components/ui/LectureCard.vue b/frontend/src/components/ui/LectureCard.vue
index d85ed0b..9be4296 100644
--- a/frontend/src/components/ui/LectureCard.vue
+++ b/frontend/src/components/ui/LectureCard.vue
@@ -30,14 +30,18 @@ function goDetail() {
   <div class="lecture-card" @click="goDetail">
     <div class="card-header">
       <span class="badge" :class="lecture.format === 'online' ? 'badge-blue' : 'badge-green'">
-        <AppIcon class="badge-icon" :icon="lecture.format === 'online' ? 'world' : 'map-pin'" :size="14" />
+        <AppIcon
+          class="badge-icon"
+          :icon="lecture.format === 'online' ? 'world' : 'map-pin'"
+          :size="14"
+        />
         {{ lecture.format === 'online' ? 'Онлайн' : 'Офлайн' }}
       </span>
       <span
         class="seats"
         :class="{
           'seats-low': lecture.freeSeats <= 3 && lecture.freeSeats > 0,
-          'seats-zero': lecture.freeSeats === 0 || lecture.registrationClosed
+          'seats-zero': lecture.freeSeats === 0 || lecture.registrationClosed,
         }"
       >
         <template v-if="lecture.registrationClosed">Запись закрыта</template>
@@ -90,14 +94,7 @@ function goDetail() {
         <span class="rating-value">{{ lecture.rating }}</span>
         <span class="text-secondary text-sm">({{ lecture.reviewCount }})</span>
       </div>
-      <button
-        v-if="registered"
-        class="btn-registered"
-        disabled
-        @click.stop
-      >
-        ✓ Записан
-      </button>
+      <button v-if="registered" class="btn-registered" disabled @click.stop>✓ Записан</button>
       <button
         v-else-if="lecture.freeSeats > 0 && !lecture.registrationClosed"
         class="btn-primary btn-sm"
@@ -125,12 +122,16 @@ function goDetail() {
   flex-direction: column;
   gap: 10px;
   cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
   min-width: 0;
 }
 .lecture-card:hover {
   transform: translateY(-3px);
-  box-shadow: 0 12px 40px var(--color-black-a12), 0 0 0 1px var(--color-primary-a20);
+  box-shadow:
+    0 12px 40px var(--color-black-a12),
+    0 0 0 1px var(--color-primary-a20);
 }
 .card-header {
   display: flex;
@@ -138,15 +139,25 @@ function goDetail() {
   justify-content: space-between;
   gap: 8px;
 }
-.badge { display: inline-flex; align-items: center; gap: 4px; }
-.badge-icon { color: currentColor; }
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.badge-icon {
+  color: currentColor;
+}
 .seats {
   font-size: 12px;
   font-weight: 600;
   color: var(--color-primary-dark);
 }
-.seats-low { color: var(--color-orange-deep); }
-.seats-zero { color: var(--color-error-dark); }
+.seats-low {
+  color: var(--color-orange-deep);
+}
+.seats-zero {
+  color: var(--color-error-dark);
+}
 .card-title {
   font-size: 15px;
   font-weight: 700;
@@ -164,7 +175,9 @@ function goDetail() {
   font-size: 13px;
   color: var(--color-text-secondary);
 }
-.teacher-icon { color: var(--color-text-secondary); }
+.teacher-icon {
+  color: var(--color-text-secondary);
+}
 .card-meta {
   display: flex;
   flex-wrap: wrap;
@@ -172,12 +185,28 @@ function goDetail() {
   font-size: 12px;
   color: var(--color-text-secondary);
 }
-.meta-item { display: inline-flex; align-items: center; gap: 4px; }
-.meta-icon { color: var(--color-text-secondary); }
+.meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.meta-icon {
+  color: var(--color-text-secondary);
+}
 .card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
+  min-width: 0;
+  max-width: 100%;
+}
+.card-tags .tag-chip {
+  max-width: 100%;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.25;
 }
 .card-footer {
   display: flex;
diff --git a/frontend/src/views/student/CatalogView.vue b/frontend/src/views/student/CatalogView.vue
index 8031fd7..e36399b 100644
--- a/frontend/src/views/student/CatalogView.vue
+++ b/frontend/src/views/student/CatalogView.vue
@@ -316,7 +316,14 @@ function isRegistered(id: string) {
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 16px;
 }
-.filter-label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 6px; display: block; }
+.filters-grid > * { min-width: 0; }
+.filter-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  margin-bottom: 6px;
+  display: block;
+}
 .segmented {
   display: inline-flex;
   border: 1px solid var(--color-border-glass);
@@ -339,7 +346,8 @@ function isRegistered(id: string) {
 .free-toggle { display: flex; flex-direction: column; gap: 6px; }
 .switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); }
 .view-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
-.applied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.applied { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
+.applied .tag-chip { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25; }
 .cards-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -351,18 +359,11 @@ function isRegistered(id: string) {
 .calendar-day { padding: 16px; }
 .calendar-date { font-weight: 700; margin-bottom: 8px; }
 .calendar-items { display: flex; flex-direction: column; gap: 10px; }
-.calendar-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid var(--color-border-glass);
-  padding-bottom: 8px;
-}
+.calendar-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--color-border-glass); padding-bottom: 8px; }
 .calendar-item:last-child { border-bottom: none; padding-bottom: 0; }
 .calendar-title { font-weight: 600; }
 .calendar-meta { font-size: 12px; color: var(--color-text-secondary); }
-.modal-filters { display: flex; flex-direction: column; gap: 12px; }
+.modal-filters { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
 
 @media (max-width: 768px) {
   .filters-grid { display: none; }