itube-specs 0.0.913 → 0.0.914

package/assets/scss/mixins/_video-card.scss

@@ -4,11 +4,34 @@
 
 @mixin video-card {
   display: grid;
-  row-gap: 12px;
+  row-gap: 16px;
   width: 100%;
   align-content: start;
 }
 
+/**
+  Сетка карточек видео: 2 колонки, 3 с xs, 4 с md.
+  minmax(0, 1fr) обязателен, не `1fr`: мета-строка карточки истории нешринкуема и задаёт
+  колонке min-content, из-за которого грид вылезает за контейнер на телефоне.
+ */
+@mixin video-card-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @include from-br(xs) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br(sm) {
+    gap: 24px;
+  }
+
+  @include from-br(md) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 @mixin video-card-poster {
   position: relative;
   aspect-ratio: 16/9;

package/components/card/video/index.vue

@@ -388,7 +388,7 @@ $dropdown-column: 18px;
 
 .card-video__wrapper {
   display: grid;
-  grid-template-columns: 1fr $dropdown-column;
+  grid-template-columns: minmax(0, 1fr) $dropdown-column;
   align-items: start;
   align-content: center;
   color: $video-card-secondary;
@@ -399,13 +399,13 @@ $dropdown-column: 18px;
 
   @include from-cq($layout-breakpoint) {
     column-gap: 12px;
-    grid-template-columns: 36px 1fr $dropdown-column;
+    grid-template-columns: 36px minmax(0, 1fr) $dropdown-column;
   }
 }
 
 .--avatar .card-video__wrapper {
   column-gap: 12px;
-  grid-template-columns: 36px 1fr $dropdown-column;
+  grid-template-columns: 36px minmax(0, 1fr) $dropdown-column;
 }
 
 .--avatar .card-video__title {
@@ -434,7 +434,7 @@ $dropdown-column: 18px;
   }
 
   .--no-channel .card-video__wrapper {
-    grid-template-columns: 1fr $dropdown-column;
+    grid-template-columns: minmax(0, 1fr) $dropdown-column;
   }
 
   .--no-channel .card-video__title {
@@ -452,7 +452,7 @@ $dropdown-column: 18px;
 }
 
 .--mini .card-video__wrapper {
-  grid-template-columns: 1fr $dropdown-column;
+  grid-template-columns: minmax(0, 1fr) $dropdown-column;
 }
 
 /* Без строки канала и тегов вторая строка грида не нужна — иначе аватар и «троеточие» растягиваются. */
@@ -511,6 +511,7 @@ $dropdown-column: 18px;
   display: flex;
   align-items: center;
   grid-row: 2;
+  min-width: 0;
   margin: 6px 0 0;
   font-weight: 400;
   color: $video-card-secondary;
@@ -520,6 +521,14 @@ $dropdown-column: 18px;
   }
 }
 
+/* На узкой карточке (две колонки на телефоне) «канал · время» в строку не встают, а нешрикуемое
+   время задаёт колонке min-content и разносит грид — оставляем только время просмотра */
+@include to-cq($layout-breakpoint) {
+  .card-video__meta .card-video__channel-title {
+    display: none;
+  }
+}
+
 .card-video__meta .card-video__channel-title + .card-video__watched::before {
   content: '·';
   margin-inline: 6px;
@@ -530,6 +539,9 @@ $dropdown-column: 18px;
   align-items: center;
   column-gap: 4px;
   flex-shrink: 0;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .card-video__watched.--remaining {

package/components/grid/videos.vue

@@ -72,22 +72,9 @@ const lazyItems = computed(() => props.items.slice(eagerCount.value + IDLE_COUNT
 
 <style lang="scss">
 .grid-videos {
-  position: relative;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(2, 1fr);
-
-  @include from-br(xs) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  @include from-br(sm) {
-    gap: 24px;
-  }
+  @include video-card-grid;
 
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  position: relative;
 }
 
 .grid-videos__idle,

package/components/layout/burger.vue

@@ -260,6 +260,7 @@ router.afterEach(() => {
 
 .layout-burger__menu:last-child {
   padding-bottom: 12px;
+  margin-bottom: 4px;
 }
 
 .layout-burger__niche {

package/components/layout/extra-links.vue

@@ -1,11 +1,14 @@
 <template>
   <nav class="layout-extra-links">
+    <!-- active-class указывает на базовый класс, а не на '': пустую строку NuxtLink считает
+         falsy и подставляет дефолты router-link-active, а они зависят от текущего роута и
+         ломают гидрацию лениво гидрируемого футера. Дубль класса Vue схлопывает. -->
     <NuxtLink
       v-for="(item, index) in additionalLinksItems"
       :key="`s-additional-link-${index}`"
       :to="generateLink(item.name)"
-      active-class=""
-      exact-active-class=""
+      active-class="layout-extra-links__link"
+      exact-active-class="layout-extra-links__link"
       class="layout-extra-links__link"
       @click="emit('close')"
     >{{ $t(`additional_link.${item.title}`) }}</NuxtLink>

package/components/layout/logo.vue

@@ -1,9 +1,12 @@
 <template>
+  <!-- active-class указывает на базовый класс, а не на '': пустую строку NuxtLink считает
+       falsy и подставляет дефолты router-link-active, а они зависят от текущего роута и
+       ломают гидрацию лениво гидрируемого футера. Дубль класса Vue схлопывает. -->
   <NuxtLink
     :class="{'layout-logo--glow': glow}"
     :to="generateLink('/')"
-    active-class=""
-    exact-active-class=""
+    active-class="layout-logo"
+    exact-active-class="layout-logo"
     class="layout-logo"
     @click="onLogoClick"
   >

package/components/library/feed.vue

@@ -199,8 +199,12 @@ const ageText = computed(() => {
   grid-template-columns: auto minmax(0, 1fr) auto;
   column-gap: 16px;
   row-gap: 12px;
-  align-items: start;
+  align-items: center;
   margin-bottom: 20px;
+
+  @include from-br(sm) {
+    align-items: start;
+  }
 }
 
 .library-feed__header.--without-avatar {

package/package.json

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

package/pages/history.vue

@@ -238,19 +238,9 @@ const breadcrumbs = [
 }
 
 .history__grid {
-  position: relative;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(2, 1fr);
-
-  @include from-br(sm) {
-    gap: 24px;
-    grid-template-columns: repeat(3, 1fr);
-  }
+  @include video-card-grid;
 
-  @include from-br(md) {
-    grid-template-columns: repeat(4, 1fr);
-  }
+  position: relative;
 }
 
 .ui-pagination.history__pagination {

package/pages/library/index.vue

@@ -30,7 +30,7 @@
 
         <UiLink
           :to="generateLink('/history')"
-          theme="secondary"
+          theme="simple"
         >
           {{ t('library.history') }}
           <UiIcon
@@ -91,7 +91,7 @@
 
         <UiLink
           :to="generateLink('/following')"
-          theme="secondary"
+          theme="simple"
         >
           {{ t('library.whats_new', { count: newTotal }) }}
           <UiIcon