itube-specs 0.0.929 → 0.0.931

package/DOCS/CONVENTIONS.md

@@ -27,11 +27,16 @@ Don't fork a component when a prop expresses the difference.
 |---|---|
 | text | `<span>` inline, `<p>` paragraph — never bare `<div>` |
 | structure | `header`, `nav`, `main`, `aside`, `footer`, `section`, `article` |
-| sequence of similar items | `<ul>`/`<ol>` + `<li>` — chip rows and tag clouds included |
 | action / navigation / collapsible | `<button>` / `<a>` / `<details>`+`<summary>` |
 | forms | `<label>`, `<fieldset>`, `<legend>`, native `<input>` types |
 | emphasis, figures | `<em>`/`<strong>`, `<figure>`/`<figcaption>` — not style-only spans |
 
+**No `<ul>`/`<li>` for repeated rows.** Chip rows, tag clouds, link lists: render the items straight into a
+flex container. `<li>` costs one element per item, and these rows repeat per card across grids of 40+ — the
+node count is a measured TBT lever here. Don't substitute `role="list"`/`role="listitem"` either: the ARIA
+role overrides the native one, so a link stops being announced as a link. Real `<ul>`/`<li>` stays correct for
+one-off lists that aren't multiplied by a grid.
+
 ## TypeScript
 
 - Semicolons always. No code comments unless asked.

package/assets/scss/themes/dark/_theme.scss

@@ -69,6 +69,17 @@ $chips-small-text: $color-zinc-400;
 $chips-bg-alphabet: $color-zinc-800-50;
 $chips-bg-alphabet--hover: $color-zinc-700;
 
+// ─── Chips micro row (ряд микро-плашек на карточке: скролл и поповер «ещё») ───
+$chips-micro-more-bg: $color-zinc-800-80;
+$chips-micro-more-bg--hover: $color-zinc-700;
+$chips-micro-more-bg--active: $color-indigo-600-20;
+$chips-micro-more-text: $color-zinc-300;
+$chips-micro-more-text--hover: $color-white;
+$chips-micro-more-text--active: $color-indigo-300;
+$chips-micro-popover-bg: $color-zinc-900;
+$chips-micro-popover-item-bg: $color-zinc-800;
+$chips-micro-popover-shadow: 0 12px 32px #{$mono-black-50};
+
 // ─── Input ───
 $input-bg: $color-zinc-800-50;
 $input-text: $color-white;
@@ -221,17 +232,10 @@ $video-card-action-active-icon: $color-white;
 $video-card-action-active-icon--hover: $color-white;
 
 // ─── Video card dropdown ───
-$video-card-dropdown-border: $color-zinc-800;
 $video-card-dropdown-size--hover: 1;
 
-// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
-$video-card-tags-more-bg: $color-zinc-800-80;
-$video-card-tags-more-bg--hover: $color-zinc-700;
-$video-card-tags-more-text: $color-zinc-300;
-$video-card-tags-more-text--hover: $color-white;
-$video-card-tags-popover-bg: $color-zinc-900;
-$video-card-tags-popover-border: $color-zinc-800;
-$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+// ─── Video menu (меню действий над видео) ───
+$video-menu-preview-border: $color-zinc-800;
 
 // ─── Video info ───
 $video-info-item-text: $color-zinc-500-70;

package/assets/scss/themes/light/_theme.scss

@@ -79,6 +79,17 @@ $chips-small-bg: $color-gray-300;
 $chips-small-bg--hover: $color-gray-400;
 $chips-small-text: $color-gray-700;
 
+// ─── Chips micro row (ряд микро-плашек на карточке: скролл и поповер «ещё») ───
+$chips-micro-more-bg: $color-gray-300;
+$chips-micro-more-bg--hover: $color-gray-400;
+$chips-micro-more-bg--active: $color-indigo-600-20;
+$chips-micro-more-text: $color-gray-700;
+$chips-micro-more-text--hover: $color-gray-900;
+$chips-micro-more-text--active: $color-indigo-700;
+$chips-micro-popover-bg: $color-white;
+$chips-micro-popover-item-bg: $color-gray-200;
+$chips-micro-popover-shadow: 0 12px 32px #{$mono-black-25};
+
 // ─── Input ───
 $input-bg: $color-white;
 $input-text: $color-gray-900;
@@ -278,17 +289,8 @@ $video-card-action-active-border--hover: $color-red-600;
 $video-card-action-active-icon: $color-gray-900;
 $video-card-action-active-icon--hover: $color-white;
 
-// ─── Video card dropdown ───
-$video-card-dropdown-border: transparent;
-
-// ─── Video card tags (ряд плашек моделей и поповер «ещё») ───
-$video-card-tags-more-bg: $color-gray-300;
-$video-card-tags-more-bg--hover: $color-gray-400;
-$video-card-tags-more-text: $color-gray-700;
-$video-card-tags-more-text--hover: $color-gray-900;
-$video-card-tags-popover-bg: $color-white;
-$video-card-tags-popover-border: $color-gray-300;
-$video-card-tags-popover-shadow: 0 10px 15px -3px #{$mono-black-25}, 0 4px 6px -4px #{$mono-black-25};
+// ─── Video menu (меню действий над видео) ───
+$video-menu-preview-border: transparent;
 
 // ─── Video info ───
 $video-info-item-text: $color-gray-400;

package/components/card/video/index.vue

@@ -130,34 +130,15 @@
           {{ remaining ? remainingText : watchedAgo }}
         </span>
       </p>
-      <div
-        v-if="!mini && !compact && !history && cardTags && cardTags.length > 0"
-        ref="tagsRef"
+      <UiChipsMicro
+        v-if="!mini && !compact && !history"
+        v-model:open="isTagsOpen"
+        :items="card.models"
+        :label="t('show_all_models')"
         class="card-video__tags"
-      >
-        <div
-          class="card-video__tags-wrapper"
-          @click="isTagsOpen = false"
-        >
-          <UiChips
-            v-for="(item, index) in cardTags"
-            micro
-            :key="`${card.guid}-tag-${index}`"
-            :item="item"
-            class="card-video__chips"
-            is-link
-          />
-        </div>
-        <button
-          v-if="hasMoreTags"
-          :aria-label="t('show_all_models')"
-          :aria-expanded="isTagsOpen"
-          class="card-video__tags-more"
-          type="button"
-          @click="isTagsOpen = !isTagsOpen"
-        >+</button>
-      </div>
-      <CardDropdownTrigger
+        prefix="models"
+      />
+      <VideoMenuTrigger
         :card="card"
         :show-watch-later="canWatchLater"
         :show-favorites="canFavorite"
@@ -174,13 +155,9 @@
 
 <script setup lang="ts">
 import type { IVideoCard } from '../../../types';
-import { onClickOutside } from '@vueuse/core';
 import { convertString, getDuration } from '../../../runtime';
 import { CSS_BREAKPOINTS } from '../../../config/css-breakpoints';
 
-/** Потолок плашек в разметке: ряд скроллится, но неограниченный список раздувает DOM всей сетки */
-const TAGS_LIMIT = 8;
-
 const featureFlags = useRuntimeConfig().public.featureFlags;
 
 const props = defineProps<{
@@ -214,8 +191,6 @@ const { generateLink } = useGenerateLink();
 
 const pageName = useGetPureRouteName();
 const isChannelPage = computed(() => pageName === 'channels-channel');
-const isModelPage = computed(() => pageName.startsWith('models-slug'));
-const isSearchPage = computed(() => pageName.startsWith('search-slug'));
 
 const previewId = useId();
 const { activePreviewId, startPreviewByHover, stopPreviewByHover, startPreviewByTouch } = useVideoPreview();
@@ -277,44 +252,13 @@ const channelLink = computed(() => props.card.channelName
   ? generateLink(`/channels/${convertString().toSlug(props.card.channelName)}`)
   : undefined);
 
-const slug = useSlug();
-
-const cardTags = computed(() => {
-  const query = slug.value.toLowerCase();
-
-  const models = props.card.models
-      ? [ ...props.card.models ].filter(item => !isModelPage.value || item.toLowerCase() !== query)
-      : [];
-
-  const searchRank = (item: string) => {
-    if (!isSearchPage.value || !query) return 0;
-    const name = item.toLowerCase();
-    if (name === query) return 0;
-    return name.includes(query) ? 1 : 2;
-  };
-
-  const sortModels = models.sort((a, b) =>
-      searchRank(a) - searchRank(b) || a.localeCompare(b)
-  );
-
-  return sortModels.slice(0, TAGS_LIMIT).map(item => convertString().toChips(item, 'models'));
-});
-
-const tagsRef = ref();
 const isTagsOpen = ref(false);
-
-const hasMoreTags = computed(() => cardTags.value.length > 1);
-
-onClickOutside(tagsRef, () => {
-  isTagsOpen.value = false;
-});
 </script>
 
 <style lang="scss">
 $inset-label: 8px;
 $layout-breakpoint: 250px;
 $progress-height: 4px;
-$tags-fade: 40px;
 
 // Колонка под меню карточки фиксирована, а не auto: иначе ширина зависит от того, отрисовано меню
 // или нет, и в момент подмены кнопки заголовок дёргается
@@ -373,13 +317,13 @@ $dropdown-column: 18px;
   }
 }
 
-.card-dropdown__trigger > .ui-icon {
+.video-menu-trigger > .ui-icon {
   @media (hover: hover) {
     transition: var(--transition) transform;
   }
 }
 
-.card-dropdown__trigger:is(:hover, :focus-visible) > .ui-icon {
+.video-menu-trigger:is(:hover, :focus-visible) > .ui-icon {
   @media (hover: hover) {
     transform: scale($video-card-dropdown-size--hover);
   }
@@ -451,7 +395,7 @@ $dropdown-column: 18px;
 }
 
 .--avatar .card-video__tags {
-  grid-column: 2;
+  grid-column: 2 / -1;
 }
 
 @include to-br(sm) {
@@ -469,7 +413,7 @@ $dropdown-column: 18px;
   }
 
   .--no-channel .card-video__tags {
-    grid-column: 1;
+    grid-column: 1 / -1;
   }
 
   .--no-channel .card-video__dropdown {
@@ -617,127 +561,21 @@ $dropdown-column: 18px;
   aspect-ratio: 16/9;
 }
 
-@property --card-video-tags-fade {
-  syntax: '<length>';
-  inherits: false;
-  initial-value: 0;
-}
-
-/* Затемнение гаснет на последних 15% прокрутки — доехал до конца, подсказывать больше нечего */
-@keyframes card-video-tags-fade {
-  0%,
-  85% {
-    --card-video-tags-fade: #{$tags-fade};
-  }
-
-  100% {
-    --card-video-tags-fade: 0px;
-  }
-}
-
-@keyframes card-video-tags-more {
-  0%,
-  100% {
-    visibility: visible;
-  }
+/* Карточка — свой контекст наложения из-за container-type, поповер плашек иначе уйдёт под соседнюю */
+.card-video.--tags-open {
+  z-index: $z-index-dropdown;
 }
 
+/* Ряд плашек лежит ниже «троеточия» — колонка под меню в этом ряду свободна, отдаём её плашкам */
 .card-video__tags {
-  position: relative;
-  grid-column: 1;
-  min-height: var(--chips-height-micro);
-  timeline-scope: --card-video-tags;
+  grid-column: 1 / -1;
 
   @include from-cq($layout-breakpoint) {
-    grid-column: 2;
+    grid-column: 2 / -1;
     margin-top: 10px;
   }
 }
 
-.card-video__tags-wrapper {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.card-video__tags-more {
-  @include font-xs;
-
-  position: absolute;
-  inset-block: 0;
-  right: 0;
-  z-index: $z-index-dropdown;
-  display: grid;
-  place-content: center;
-  padding-inline: 8px;
-  visibility: hidden;
-  color: $video-card-tags-more-text;
-  background-color: $video-card-tags-more-bg;
-  border-radius: $radius-6;
-
-  @include hover(background-color, color) {
-    background-color: $video-card-tags-more-bg--hover;
-    color: $video-card-tags-more-text--hover;
-  }
-
-  @include to-br(sm) {
-    display: none;
-  }
-}
-
-/* Влезли плашки в ряд или нет, решает сам браузер: у непрокручиваемого контейнера scroll-таймлайн
-   неактивен, анимации не применяются — ни затемнения, ни кнопки. Без замеров и без JS, то есть
-   ещё до гидрации. Где scroll() не поддержан — ряд просто обрезается по краю. */
-@supports (animation-timeline: scroll()) {
-  .card-video__tags-wrapper {
-    scroll-timeline: --card-video-tags inline;
-    animation: card-video-tags-fade linear both;
-    animation-timeline: --card-video-tags;
-    mask-image: linear-gradient(to right, currentcolor calc(100% - var(--card-video-tags-fade)), transparent);
-  }
-
-  .card-video__tags-more {
-    animation: card-video-tags-more linear both;
-    animation-timeline: --card-video-tags;
-  }
-}
-
-/* Раскрытый список — тот же DOM: ряд перестаёт быть скроллом и разворачивается поповером поверх */
-.--tags-open .card-video__tags-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: $z-index-dropdown;
-  flex-wrap: wrap;
-  width: max-content;
-  max-width: 100%;
-  padding: 8px $tags-fade 8px 8px;
-  overflow: visible;
-  background-color: $video-card-tags-popover-bg;
-  border: 1px solid $video-card-tags-popover-border;
-  border-radius: $radius-md;
-  box-shadow: $video-card-tags-popover-shadow;
-  mask-image: none;
-}
-
-.--tags-open .card-video__tags-more {
-  visibility: visible;
-}
-
-/* Карточка — свой контекст наложения из-за container-type, поповер иначе уйдёт под соседнюю */
-.card-video.--tags-open {
-  z-index: $z-index-dropdown;
-}
-
 .card-video__user {
   @include font-xs;
 

package/components/player/playlist.vue

@@ -104,7 +104,7 @@
             class="player-playlist__card-mini"
             link
           />
-          <CardDropdownTrigger
+          <VideoMenuTrigger
             :top="topDropdownIndex === index"
             :card="item"
             :show-remove="isOwner"

package/components/ui/chips-micro.vue

@@ -0,0 +1,298 @@
+<!-- Ряд микро-плашек для карточек: скролл на мобиле, перенос с обрезкой по первой строке и «+» на десктопе.
+     ДЕМО-ВАРИАНТ: переполнение считает JS после отрисовки — показать дизайнеру запаздывание «+».
+     Не путать с UiExpandRow — тот про любые размеры чипсов и разворачивается вниз на месте. -->
+<template>
+  <div
+    v-if="tags.length"
+    ref="rootRef"
+    :class="{'--open': open}"
+    class="ui-chips-micro"
+  >
+    <div
+      ref="listRef"
+      class="ui-chips-micro__list"
+    >
+      <UiChips
+        v-for="item in tags"
+        :key="item.title"
+        :item="item"
+        class="ui-chips-micro__item"
+        micro
+        is-link
+      />
+    </div>
+    <button
+      v-if="isOverflow"
+      :style="{ '--ui-chips-micro-more-left': `${moreLeft}px` }"
+      :aria-label="moreLabel"
+      :aria-expanded="open"
+      class="ui-chips-micro__more"
+      type="button"
+      @click="open = !open"
+    >+</button>
+    <div
+      v-if="open"
+      class="ui-chips-micro__popover"
+      @click="open = false"
+    >
+      <UiChips
+        v-for="item in hiddenTags"
+        :key="item.title"
+        :item="item"
+        class="ui-chips-micro__popover-item"
+        micro
+        is-link
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core';
+import { convertString } from '../../runtime';
+
+const props = withDefaults(defineProps<{
+  /** Исходные названия сущностей — моделей, категорий, тегов */
+  items?: string[]
+  /** Префикс раздела для ссылки чипсы и для определения «своей» страницы */
+  prefix?: string
+  /** Потолок плашек в разметке: скрытые остаются краулеру, но неограниченный список раздувает DOM */
+  limit?: number
+  /** Подпись кнопки «+» для скринридера */
+  label?: string
+}>(), {
+  prefix: 'models',
+  limit: 8,
+});
+
+const open = defineModel<boolean>('open', { default: false });
+
+const { t } = useI18n();
+
+const rootRef = ref();
+const listRef = ref<HTMLElement>();
+
+const pageName = useGetPureRouteName();
+
+/** Страница самой сущности: свою же плашку в списке не показываем */
+const isOwnPage = computed(() => pageName.startsWith(`${props.prefix}-slug`));
+const isSearchPage = computed(() => pageName.startsWith('search-slug'));
+
+const slug = useSlug();
+
+const tags = computed(() => {
+  const query = slug.value.toLowerCase();
+
+  const items = props.items
+      ? [ ...props.items ].filter(item => !isOwnPage.value || item.toLowerCase() !== query)
+      : [];
+
+  const searchRank = (item: string) => {
+    if (!isSearchPage.value || !query) return 0;
+    const name = item.toLowerCase();
+    if (name === query) return 0;
+    return name.includes(query) ? 1 : 2;
+  };
+
+  const sorted = items.sort((a, b) =>
+      searchRank(a) - searchRank(b) || a.localeCompare(b)
+  );
+
+  return sorted.slice(0, props.limit).map(item => convertString().toChips(item, props.prefix));
+});
+
+const moreLabel = computed(() => props.label ?? t('show_all'));
+
+const GAP = 8;
+
+const isOverflow = ref(false);
+const moreLeft = ref(0);
+const visibleCount = ref(0);
+
+/** В поповере только то, что не влезло в строку, — как в макете */
+const hiddenTags = computed(() => tags.value.slice(visibleCount.value));
+
+// Обрезку делает CSS (max-height в одну строку + overflow: hidden), здесь только читаем раскладку:
+// вылез ли контент за строку и где кончается последняя влезшая плашка — «+» встаёт сразу за ней.
+// В раскрытом виде список тянется под контент, замер дал бы ложное «влезло».
+function measure() {
+  const el = listRef.value;
+  if (!el || open.value) return;
+
+  if (!isChipsOverflowWidth()) {
+    isOverflow.value = false;
+    return;
+  }
+
+  isOverflow.value = el.scrollHeight > el.clientHeight;
+  if (!isOverflow.value) return;
+
+  const chips = Array.from(el.children) as HTMLElement[];
+  const firstLineTop = chips[ 0 ]?.offsetTop ?? 0;
+
+  let lastInLine = chips[ 0 ];
+  let count = 0;
+  for (const chip of chips) {
+    if (chip.offsetTop !== firstLineTop) break;
+    lastInLine = chip;
+    count += 1;
+  }
+
+  visibleCount.value = count;
+  moreLeft.value = lastInLine ? lastInLine.offsetLeft + lastInLine.offsetWidth + GAP : 0;
+}
+
+useChipsOverflow(listRef, measure);
+
+onClickOutside(rootRef, () => {
+  open.value = false;
+});
+</script>
+
+<style lang="scss">
+$fade-width: 40px;
+$more-width: 32px;
+
+@property --ui-chips-micro-fade-start {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --ui-chips-micro-fade-end {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+/* Затемнение с той стороны, где есть неувиденное: слева проявляется, как только тронулся с места,
+   справа гаснет на подъезде к концу. Обе величины по нулям, пока ряд не прокручивается вовсе. */
+@keyframes ui-chips-micro-fade {
+  0% {
+    --ui-chips-micro-fade-start: 0px;
+    --ui-chips-micro-fade-end: #{$fade-width};
+  }
+
+  15% {
+    --ui-chips-micro-fade-start: #{$fade-width};
+  }
+
+  85% {
+    --ui-chips-micro-fade-end: #{$fade-width};
+  }
+
+  100% {
+    --ui-chips-micro-fade-start: #{$fade-width};
+    --ui-chips-micro-fade-end: 0px;
+  }
+}
+
+.ui-chips-micro {
+  position: relative;
+  min-height: var(--chips-height-micro);
+}
+
+.ui-chips-micro__list {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+
+  /* Десктоп: не скролл, а перенос, обрезанный по первой строке. Обрезка через overflow: hidden —
+     контейнер не прокручиваемый, колесо мыши не перехватывает. Место справа под «+» даёт паддинг. */
+  @include from-br(sm) {
+    flex-wrap: wrap;
+    align-content: flex-start;
+    max-height: var(--chips-height-micro);
+    padding-right: $more-width;
+    overflow: hidden;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.ui-chips-micro__item {
+  flex-shrink: 0;
+}
+
+.ui-chips-micro__more {
+  @include font-xs;
+
+  position: absolute;
+  inset-block: 0;
+  left: var(--ui-chips-micro-more-left, 0);
+  z-index: $z-index-dropdown;
+  display: grid;
+  place-content: center;
+  padding-inline: 10px;
+  font-weight: 500;
+  color: $chips-micro-more-text;
+  background-color: $chips-micro-more-bg;
+  border-radius: $radius-6;
+
+  @include hover(background-color, color) {
+    background-color: $chips-micro-more-bg--hover;
+    color: $chips-micro-more-text--hover;
+  }
+
+  @include to-br(sm) {
+    display: none;
+  }
+}
+
+.--open .ui-chips-micro__more {
+  color: $chips-micro-more-text--active;
+  background-color: $chips-micro-more-bg--active;
+}
+
+/* Панель под рядом: только те плашки, что не влезли. Рисуется по клику, в свёрнутом виде
+   её в разметке нет — дублирования плашек на сетке не возникает. */
+.ui-chips-micro__popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $z-index-dropdown;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: max-content;
+  max-width: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  background-color: $chips-micro-popover-bg;
+  border-radius: $radius-md;
+  box-shadow: $chips-micro-popover-shadow;
+}
+
+.ui-chips-micro__popover-item {
+  background-color: $chips-micro-popover-item-bg;
+}
+
+/* Затемнение края на мобиле по-прежнему без замеров: непрокручиваемый ряд — таймлайн неактивен */
+@supports (animation-timeline: scroll()) {
+  .ui-chips-micro__list {
+    scroll-timeline: --ui-chips-micro inline;
+    animation: ui-chips-micro-fade linear both;
+    animation-timeline: --ui-chips-micro;
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      currentcolor var(--ui-chips-micro-fade-start),
+      currentcolor calc(100% - var(--ui-chips-micro-fade-end)),
+      transparent 100%
+    );
+
+    @include from-br(sm) {
+      animation: none;
+      mask-image: none;
+    }
+  }
+}
+
+</style>

package/components/{card/dropdown/trigger.vue → video/menu-trigger.vue}

@@ -1,4 +1,4 @@
-<!-- Кнопка меню карточки: до первого клика в DOM только она, чанк самого меню грузится по требованию -->
+<!-- Кнопка меню видео: до первого клика в DOM только она, чанк самого меню грузится по требованию -->
 <template>
   <component
     v-if="dropdown"
@@ -10,7 +10,7 @@
     v-else
     v-bind="{ onClick: $attrs.onClick }"
     :aria-label="t('open_menu')"
-    :class="[$attrs.class, 'card-dropdown__trigger']"
+    :class="[$attrs.class, 'video-menu-trigger']"
     type="button"
     @click="mountDropdown"
   >
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import type { Component } from 'vue';
-import type { IVideoCard } from '../../../types';
+import type { IVideoCard } from '../../types';
 
 defineOptions({ inheritAttrs: false });
 
@@ -38,18 +38,18 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-// Не LazyCardDropdown: async-обёртка на первом рендере отдаёт коммент-заглушку вместо элемента,
+// Не LazyVideoMenu: async-обёртка на первом рендере отдаёт коммент-заглушку вместо элемента,
 // колонка грида схлопывается и текст карточки успевает дёрнуться. Кладём уже загруженный компонент —
 // подмена кнопки на меню происходит одним патчем.
 const dropdown = shallowRef<Component | null>(null);
 
 async function mountDropdown() {
-  dropdown.value = (await import('./index.vue')).default;
+  dropdown.value = (await import('./menu.vue')).default;
 }
 </script>
 
 <style lang="scss">
-.card-dropdown__trigger {
+.video-menu-trigger {
   position: relative;
 
   &::after {

package/components/{card/dropdown/index.vue → video/menu.vue}

@@ -10,7 +10,7 @@
       <slot name="trigger">
         <button
           :aria-label="$t('open_menu')"
-          class="card-dropdown__trigger"
+          class="video-menu-trigger"
           type="button"
         >
           <UiIcon
@@ -23,7 +23,7 @@
     <template #header>
       <CardVideoMini
         :card="card"
-        class="card-dropdown__preview _to-md"
+        class="video-menu__preview _to-md"
       />
     </template>
     <template #items="className">
@@ -103,8 +103,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IVideoCard } from '../../../types';
-import { AuthorizationApiService } from '../../../services/api/authorization.service';
+import type { IVideoCard } from '../../types';
+import { AuthorizationApiService } from '../../services/api/authorization.service';
 
 const props = defineProps<{
   card: IVideoCard
@@ -177,7 +177,7 @@ defineExpose({ openDropdown });
 </script>
 
 <style lang="scss">
-.card-dropdown__trigger {
+.video-menu-trigger {
   position: relative;
 
   &::after {
@@ -185,8 +185,8 @@ defineExpose({ openDropdown });
   }
 }
 
-.card-dropdown__preview {
+.video-menu__preview {
   padding: 16px 32px 16px 16px;
-  border-bottom: 1px solid $video-card-dropdown-border;
+  border-bottom: 1px solid $video-menu-preview-border;
 }
 </style>

package/composables/use-chips-overflow.ts

@@ -0,0 +1,90 @@
+import type { Ref } from 'vue';
+import { CSS_BREAKPOINTS } from '../config/css-breakpoints';
+
+// Наблюдатель, медиа-проверка и ожидание шрифта — по одному на всю страницу, а не на карточку:
+// иначе на сетке оказалось бы полсотни ResizeObserver'ов и столько же слушателей matchMedia.
+// Лежит отдельным модулем, а не в <script> компонента: там eslint --fix уносит это в <script setup>,
+// и общее состояние молча становится поэкземплярным.
+let observer: ResizeObserver | null = null;
+let mediaQuery: MediaQueryList | null = null;
+let fontsWatched = false;
+
+const measures = new Map<Element, () => void>();
+
+function ensureObserver() {
+  if (!observer) {
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        measures.get(entry.target)?.();
+      }
+    });
+  }
+
+  return observer;
+}
+
+function remeasureAll() {
+  for (const measure of measures.values()) {
+    measure();
+  }
+}
+
+function syncObserved() {
+  for (const el of measures.keys()) {
+    if (mediaQuery?.matches) {
+      ensureObserver().observe(el);
+    }
+    else {
+      ensureObserver().unobserve(el);
+    }
+  }
+}
+
+/** Ниже sm кнопки «ещё» нет вовсе — там не наблюдаем и раскладку не читаем совсем. */
+export function isChipsOverflowWidth() {
+  if (!mediaQuery) {
+    mediaQuery = window.matchMedia(`(min-width: ${CSS_BREAKPOINTS.sm}px)`);
+    mediaQuery.addEventListener('change', () => {
+      syncObserved();
+      remeasureAll();
+    });
+  }
+
+  return mediaQuery.matches;
+}
+
+// Подмену шрифта наблюдатель не поймает: ширину ряда задаёт колонка грида, высоту режет max-height —
+// от смены гарнитуры ни то, ни другое не меняется, а ширина плашек меняется. Пересчитываем разово.
+function watchFonts() {
+  if (fontsWatched || !document.fonts) return;
+
+  fontsWatched = true;
+  document.fonts.ready.then(remeasureAll);
+}
+
+/**
+ * Подписывает ряд плашек на пересчёт переполнения: ресайз, смена размера экрана, подмена шрифта.
+ * @param elRef - ссылка на обрезанный по строке контейнер плашек
+ * @param measure - чтение раскладки этого ряда, вызывается уже после пересчёта браузером
+ */
+export function useChipsOverflow(elRef: Ref<HTMLElement | undefined>, measure: () => void) {
+  onMounted(() => {
+    if (!elRef.value) return;
+
+    measures.set(elRef.value, measure);
+
+    if (isChipsOverflowWidth()) {
+      ensureObserver().observe(elRef.value);
+      watchFonts();
+    }
+
+    measure();
+  });
+
+  onBeforeUnmount(() => {
+    if (!elRef.value) return;
+
+    measures.delete(elRef.value);
+    observer?.unobserve(elRef.value);
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.929",
+  "version": "0.0.931",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {