@rt-tools/ui-kit 0.3.1 → 0.5.0

package/src/lib/ui-kit/info-badge/info-badge.component.scss

@@ -22,33 +22,37 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-    }
 
-    .size-l {
-        padding: var(--rt-spacing-4) var(--rt-spacing-12);
-        font-size: var(--rt-font-size-md);
+        &--size-l {
+            padding: var(--rt-spacing-4) var(--rt-spacing-12);
+            font-size: var(--rt-font-size-md);
 
-        .mat-icon {
-            font-size: var(--rt-font-size-xl);
+            .mat-icon {
+                font-size: var(--rt-font-size-xl);
+            }
         }
-    }
 
-    .size-m {
-        padding: var(--rt-spacing-4) var(--rt-spacing-12);
-        font-size: var(--rt-font-size-sm);
+        &--size-m {
+            padding: var(--rt-spacing-4) var(--rt-spacing-12);
+            font-size: var(--rt-font-size-sm);
 
-        .mat-icon {
-            font-size: var(--rt-font-size-md);
+            .mat-icon {
+                font-size: var(--rt-font-size-md);
+            }
         }
-    }
-
-    .size-s {
-        padding: var(--rt-spacing-4) var(--rt-spacing-12);
-        font-size: var(--rt-font-size-xs);
-        letter-spacing: 0.025rem;
 
-        .mat-icon {
+        &--size-s {
+            padding: var(--rt-spacing-4) var(--rt-spacing-12);
             font-size: var(--rt-font-size-xs);
+            letter-spacing: 0.025rem;
+
+            .mat-icon {
+                font-size: var(--rt-font-size-xs);
+            }
+        }
+
+        &--bold {
+            font-weight: var(--rt-font-weight-bold);
         }
     }
 
@@ -56,8 +60,4 @@
         width: unset;
         height: unset;
     }
-
-    .bold {
-        font-weight: var(--rt-font-weight-bold);
-    }
 }

package/src/lib/ui-kit/popover/stories/component/test-popover.component.scss

@@ -0,0 +1,32 @@
+:host {
+    position: relative;
+    display: block;
+    min-height: 12rem;
+
+    .body {
+        max-width: 20rem;
+        padding: 0.75rem 1rem;
+        border: 1px solid var(--rt-border-neutral-default);
+        border-radius: 0.5rem;
+        background-color: var(--rt-bg-base-base);
+
+        &__title {
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+
+        &__list {
+            margin: 0 0 0.5rem;
+            padding-left: 1rem;
+        }
+    }
+
+    /*
+     * Класс от потребителя садится на хост слоя привязкой — правило целит в сам хост, а не
+     * внутрь него: инкапсуляция дальше хоста дочернего компонента не пускает.
+     */
+    rtui-popover-container.popover-accent {
+        outline: 2px solid var(--rt-border-accent-primary);
+        outline-offset: 0.25rem;
+    }
+}

package/src/lib/ui-kit/scrollable/scrollable-container.component.scss

@@ -24,9 +24,22 @@ $scrollable: (
         padding: 1rem,
         background-color: var(--rt-bg-base-base),
     ),
+    // Признак непоказанного снизу: полоса растушёвки у нижнего края и значок поверх неё.
+    scroll-hint: (
+            height: 2.5rem,
+            icon-size: 1.25rem,
+            // Цвет растушёвки ведёт выбранная цветовая схема: мягкая заливка акцента берётся
+            // из рядов роли, которые схема и переопределяет, а светлую и тёмную темы токен
+            // разводит сам. Взятый нейтральным фоном, цвет стоял бы одним и тем же во всех
+            // схемах. Потребитель, которому нужен свой, переназначает это свойство.
+            color: var(--rt-bg-accent-primary-subtle),
+        ),
 );
 
 :host {
+    // Полоса растушёвки считает своё место от хоста: тело обрезает всё по своему краю, а полоса
+    // обязана дойти до содержимого подвала.
+    position: relative;
     display: var(--rt-scrollable-host-display);
     width: var(--rt-scrollable-host-width);
     height: var(--rt-scrollable-host-height);
@@ -58,5 +71,49 @@ $scrollable: (
             padding: var(--rt-scrollable-footer-padding);
             background-color: var(--rt-scrollable-footer-background-color);
         }
+
+        // Полоса стоит поверх стыка списка и подвала и не ловит указатель: под ней живой список,
+        // и перехваченное нажатие уводило бы человека мимо пункта. Значок ловит его сам — иначе
+        // подсказку не прочитать. Места в колонке полоса не занимает: занятое, оно отодвинуло бы
+        // последний пункт от края у каждого потребителя области.
+        // Подъём над низом области приходит замером — это высота подвала без верхнего отступа:
+        // ровно там начинается его содержимое, и до него полоса и доходит. Оборванная у края
+        // списка, она оставляла до разделителя полосу чистого фона.
+        &__scroll-hint {
+            position: absolute;
+            z-index: 1;
+            right: 0;
+            left: 0;
+            display: flex;
+            height: var(--rt-scrollable-scroll-hint-height);
+            align-items: flex-end;
+            justify-content: center;
+
+            // Растушёвка красится фоном темы, а не уходит в `transparent`: прозрачный — это
+            // чёрный с нулевой прозрачностью, и на тёмной теме такой градиент идёт через грязь.
+            // Начало берётся тем же цветом с нулевой прозрачностью — переход остаётся чистым в
+            // обеих темах, а потребитель, перекрасивший область, получает свой цвет даром.
+            background: linear-gradient(
+                to bottom,
+                rgb(from var(--rt-scrollable-scroll-hint-color) r g b / 0%),
+                var(--rt-scrollable-scroll-hint-color)
+            );
+            pointer-events: none;
+        }
+
+        // Значок сидит на своей подложке: без неё он ложится поверх растворяющегося содержимого
+        // и читается как его часть — на кадре его не отличить от полустёртого пункта.
+        &__scroll-hint-icon {
+            display: flex;
+            width: var(--rt-scrollable-scroll-hint-icon-size);
+            height: var(--rt-scrollable-scroll-hint-icon-size);
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-radius-full);
+            background-color: var(--rt-bg-base-base);
+            color: var(--rt-text-base-secondary);
+            font-size: var(--rt-scrollable-scroll-hint-icon-size);
+            pointer-events: auto;
+        }
     }
 }

package/src/lib/ui-kit/scrollable/stories/component/test-scrollable.component.scss

@@ -0,0 +1,17 @@
+:host {
+    display: block;
+
+    .stand {
+        height: 24rem;
+        border: 1px solid var(--rt-border-neutral-default);
+    }
+
+    .title {
+        font-weight: 500;
+    }
+
+    .row {
+        padding: 0.5rem 0;
+        border-bottom: 1px solid var(--rt-border-neutral-default);
+    }
+}

package/src/lib/ui-kit/side-menu/menu/rtui-side-menu.component.scss

@@ -19,13 +19,43 @@ $side-menu: (
     ),
     sub-menu: (
         width: 15rem,
+        // Скругление правых углов панели. Число здесь, а не в теме: тем же числом отступает от
+        // угла прокручиваемый список — иначе полоса прокрутки, идущая до самого низа, срезается
+        // скруглением, и её нижний конец выглядит обрубленным.
+        // Число, а не ступень скругления кита: то имя объявлено обоими китами, и стили, подключённые
+        // позже, перебивали бы его молча.
+        radius: 1rem,
+        // Ширина подменю на время набора запроса: тот же предел, до которого его растягивает тяга.
+        held-width: 30rem,
+        // Поле поиска ниже полного роста поля формы: в шапке подменю оно стоит рядом с кнопкой
+        // значка, и полная высота поднимала бы шапку выше двух строк списка.
+        search-height: 2.5rem,
     ),
     sub-menu-item: (
         width: 13.75rem,
         title-font-size: 0.85rem,
     ),
+    // Полоса прокрутки списков меню. Системная занимает у узкой панели заметную долю ширины и
+    // выглядит в каждой системе по-своему; здесь она узкая, с плоской дорожкой и скруглённым
+    // ползунком. Значения взяты с образца, показанного владельцем: полоса в два пикселя, дорожка
+    // светло-серая, ползунок серый со скруглением малой ступени. Цвета берутся токенами — они же
+    // разводят светлую и тёмную тему.
+    scrollbar: (
+            width: 0.125rem,
+            thumb-radius: var(--rt-radius-xs),
+            track-color: var(--rt-bg-base-strong),
+            thumb-color: var(--rt-bg-base-emphasis-soft),
+        ),
 );
 
+:host(.rtui-side-menu--pinned) {
+    // Полоса значков и закреплённое подменю стоят в ряд. Правило висит на модификаторе хоста, а
+    // не на самом хосте: поставленное безусловно, оно сдвинуло экраны каждого потребителя кита,
+    // где закрепления нет вовсе.
+    display: flex;
+    height: 100%;
+}
+
 :host {
     @each $element, $elements in $side-menu {
         @each $style-token, $value in $elements {
@@ -36,8 +66,33 @@ $side-menu: (
     // Hide drawer mask
     --mat-sidenav-scrim-color: transparent;
 
+    // Ширина, которой панель подменю стоит на экране: заданная оформлением потребителя либо
+    // раздвинутая тягой за край. Её знают трое — сама панель, ручка тяги и пункт внутри неё, —
+    // и выражение, повторённое у каждого, разъезжается на первой же правке одного из них.
+    --rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
+
+    // Полоса прокрутки обоих списков меню — полосы значков и подменю. Оформляется здесь, а не у
+    // прокручиваемой области: вид остальных её экранов от этой правки не двигается. Правило
+    // пробивает инкапсуляцию, потому что прокручивается внутренний узел области, а полоса
+    // принадлежит ему; своего входа под вид полосы область не даёт.
+    ::ng-deep .rtui-scrollable__content {
+        &::-webkit-scrollbar {
+            width: var(--rt-side-menu-scrollbar-width);
+            height: var(--rt-side-menu-scrollbar-width);
+        }
+
+        &::-webkit-scrollbar-track {
+            background: var(--rt-side-menu-scrollbar-track-color);
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: var(--rt-side-menu-scrollbar-thumb-radius);
+            background: var(--rt-side-menu-scrollbar-thumb-color);
+        }
+    }
+
     .rtui-mobile-side-menu {
-        width: var(--rt-side-menu-sub-menu-width);
+        width: var(--rt-side-menu-sub-menu-shown-width);
 
         .rtui-mobile-side-menu-list {
             display: flex;
@@ -45,7 +100,7 @@ $side-menu: (
             flex-direction: column;
 
             &--scrollable {
-                width: fit-content;
+                min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
             }
 
             &__sub {
@@ -144,6 +199,23 @@ $side-menu: (
         }
     }
 
+    // Ручка тяги лежит вне ящика подменю и вне его контейнера: панель скруглена по правому краю
+    // и режет по этой дуге всё, что внутри неё, а положенное в контейнер рядом с панелью Material
+    // уносит в свою область содержимого. Снаружи ручка идёт от края экрана до края, и стоит она
+    // там, где кончается панель: отступ полосы значков плюс ширина самой панели.
+    .rtui-side-menu-resizer {
+        position: fixed;
+        z-index: 3;
+        left: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width) - 0.25rem);
+        width: 0.25rem;
+        cursor: col-resize;
+        inset-block: 0;
+
+        &:hover {
+            background-color: var(--rt-border-neutral-default);
+        }
+    }
+
     .rtui-sub-side-menu {
         position: fixed;
         top: 0;
@@ -160,21 +232,130 @@ $side-menu: (
             // Component-local elevation token for the slide-out sub-menu drawer.
             --rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);
 
-            width: var(--rt-side-menu-sub-menu-width);
+            position: relative;
+            width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
+            min-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));
             height: 100%;
+            border-radius: 0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;
             border-left: 1px solid var(--rt-border-neutral-default);
             box-shadow: var(--rt-side-menu-sub-content-shadow);
 
+            // Список отступает от скруглённого угла на его же радиус. Панель обрезает всё, что в
+            // угол заходит, и полоса прокрутки, идущая по правому краю до самого низа, теряла в
+            // нём свой конец — выглядело это обрубленной полосой, а не скруглением панели.
+            rtui-scrollable {
+                // Отступ съедает высоту, а не прибавляет её: у области задан рост во всю панель,
+                // и без этого правила она вылезала бы за её нижний край на тот же радиус.
+                box-sizing: border-box;
+                padding-bottom: var(--rt-side-menu-sub-menu-radius);
+            }
+
             &__list {
                 width: 100%;
                 animation: fade-in-animation 0.15s ease-in-out 0.15s forwards;
                 opacity: 0;
 
+                // Список с боковой прокруткой не уже пункта — и не шире панели. Рост по
+                // содержимому раздувал бы его вместе с самой длинной подписью, и пункт уезжал
+                // бы за край панели вместо многоточия; прокрутка при этом остаётся при деле —
+                // она нужна там, где панель уже самого пункта.
                 &--scrollable {
-                    min-width: fit-content;
+                    min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
+                }
+            }
+
+            &__empty {
+                padding: var(--rt-spacing-16);
+                color: var(--rt-text-base-secondary);
+                font-size: var(--rt-font-size-xs);
+            }
+        }
+
+        // Закреплённая шторка стоит в потоке рядом с полосой значков, а не поверх страницы:
+        // тень и перекрытие у постоянно открытой панели читаются как залипший оверлей.
+        // Пока человек работает с полем, подменю стоит во всю разрешённую ширину: отобранный
+        // список читают, а не разглядывают в узкой полосе. Раздвигает панель нижняя граница, а не
+        // ширина: ширину шторки Material держит своим кодом, и ни переход, ни кадры её не двигают.
+        &--held .rtui-sub-side-menu-content {
+            min-width: var(--rt-side-menu-sub-menu-held-width);
+        }
+
+        &--pinned {
+            position: relative;
+            left: 0;
+            width: var(--rt-side-menu-sub-menu-shown-width);
+            height: 100%;
+            flex: 0 0 auto;
+
+            .rtui-sub-side-menu-content {
+                box-shadow: none;
+
+                // Появление списка рассчитано на выдвижение шторки. Закреплённая никуда не
+                // выезжает, и её список показан сразу — иначе он живёт под гашеной анимацией
+                // и не виден вовсе там, где движение выключено.
+                &__list {
+                    animation: none;
+                    opacity: 1;
                 }
             }
         }
+
+        .rtui-sub-side-menu-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--rt-spacing-8);
+            gap: var(--rt-spacing-8);
+
+            // Поле рисует готовое кита. Своего у него остаётся место в ряду, форма пилюли и
+            // рост: в шапке подменю поле стоит рядом с кнопкой значка, и полная высота поля
+            // формы поднимала бы шапку выше строки списка. Скругление и высоту задают ручки
+            // самого поля, а не рамка поверх него.
+            &__search {
+                min-width: 0;
+                flex: 1 1 auto;
+
+                --mat-form-field-outlined-container-shape: var(--rt-radius-xl);
+                --mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);
+                --mat-form-field-container-vertical-padding: var(--rt-spacing-8);
+
+                // Готовое поле разводит значок и текст на шестнадцать пикселей — двенадцать
+                // справа от значка и четыре у самого префикса. В узкой панели это половина
+                // строки запроса, поэтому зазор сведён к одной ступени. Ручки под него у поля
+                // формы нет: правится сам отступ значка.
+                &::ng-deep .mat-mdc-form-field-icon-prefix > .mat-icon {
+                    padding: 0 var(--rt-spacing-4) 0 var(--rt-spacing-12);
+                }
+            }
+
+            // Кнопку рисует готовое кита; своего у неё остаётся место в ряду.
+            &__pin {
+                flex: 0 0 auto;
+            }
+        }
+    }
+
+    // Узкая раскладка: подменю занимает экран целиком, и поле поиска стоит над списком.
+    // Рисует его то же готовое кита, что и на широком экране.
+    .rtui-side-menu-search {
+        width: 100%;
+        margin: var(--rt-spacing-8) 0;
+
+        --mat-form-field-outlined-container-shape: var(--rt-radius-xl);
+        --mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);
+        --mat-form-field-container-vertical-padding: var(--rt-spacing-8);
+
+        // Зазор между значком и запросом сведён к ступени по той же причине, что и на широком
+        // экране: готовое поле разводит их на шестнадцать пикселей.
+        &::ng-deep .mat-mdc-form-field-icon-prefix > .mat-icon {
+            padding: 0 var(--rt-spacing-4) 0 var(--rt-spacing-12);
+        }
+    }
+
+    .rtui-side-menu-empty {
+        padding: var(--rt-spacing-16);
+        color: var(--rt-text-base-secondary);
+        font-size: var(--rt-font-size-xs);
     }
 }
 

package/src/lib/ui-kit/side-menu/menu-sub-item/rtui-side-menu-sub-item.component.scss

@@ -1,4 +1,11 @@
 :host {
+    // Хост пункта — блок шириной своего места. Строкой он не сжимается по ширине вовсе, и
+    // ограничение пункта внутри него ничего не решает: список растягивается по хосту, а хост —
+    // по самой длинной подписи. Тот же класс висит и на строке списка внутри, поэтому хост
+    // адресуется именем элемента.
+    display: block;
+    max-width: 100%;
+
     &::ng-deep {
         // Set expansion panel header padding
         .mat-expansion-indicator {
@@ -17,11 +24,22 @@
         --mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height);
     }
 
+    // Пункт занимает ширину панели и не больше её: панель знает, насколько широка, — её двигают
+    // тяга за край и работа с полем поиска, — а подпись, которая в эту ширину не влезла, уходит в
+    // многоточие. Своим числом верхний предел быть не может: панель, выросшая вдвое, держала бы
+    // подписи обрезанными при пустой полосе справа. Ширины места здесь тоже мало: список с
+    // боковой прокруткой сам растёт по содержимому, и пункт, отмеренный от него, раздувается
+    // вместе с подписью и уезжает за край панели. Число остаётся нижним пределом там, где
+    // прокрутка включена: сжатый пункт прокручивать нечем.
     .rtui-side-menu-sub-item {
-        max-width: var(--rt-side-menu-sub-menu-item-width);
+        max-width: 100%;
 
+        // Нижний предел ширины действует, пока для него есть место. Вложенный пункт стоит с
+        // отступом своего уровня, и предел, взятый числом, выносил бы его правый край за панель
+        // ровно на этот отступ: ширину такой пункт оправдывает, а человек видит строку, уходящую
+        // под край панели.
         &--fixed {
-            min-width: var(--rt-side-menu-sub-menu-item-width);
+            min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
         }
 
         .rtui-side-menu-sub-item-title {
@@ -36,6 +54,15 @@
                 white-space: nowrap;
             }
 
+            // Совпавший с запросом кусок подписи. Красится набором токенов, а не умолчанием
+            // разметки выделения браузера: то жёлтое и в тёмной теме читается как чужое.
+            &__match {
+                border-radius: var(--rt-radius-xs);
+                background-color: var(--rt-bg-accent-highlight);
+                color: var(--rt-text-accent-highlight);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
             .rtui-side-menu-sub-item-title-button {
                 display: flex;
                 align-items: center;
@@ -66,12 +93,16 @@
         border-radius: var(--rt-radius-xl);
         box-shadow: none;
 
+        // Нижний предел ширины действует, пока для него есть место. Вложенный пункт стоит с
+        // отступом своего уровня, и предел, взятый числом, выносил бы его правый край за панель
+        // ровно на этот отступ: ширину такой пункт оправдывает, а человек видит строку, уходящую
+        // под край панели.
         &--fixed {
-            min-width: var(--rt-side-menu-sub-menu-item-width);
+            min-width: min(var(--rt-side-menu-sub-menu-item-width), 100%);
         }
 
         .rtui-side-menu-expand-sub-item-header {
-            max-width: var(--rt-side-menu-sub-menu-item-width);
+            max-width: 100%;
             padding: 0;
 
             &--activated {
@@ -87,6 +118,16 @@
                 font-size: var(--rt-side-menu-sub-menu-item-title-font-size);
             }
 
+            // Отметка совпавшего — та же, что у пункта со ссылкой: заголовок раздела попадает
+            // в отобранный список наравне с ним, и разное оформление одного и того же читалось
+            // бы как разный смысл.
+            &__match {
+                border-radius: var(--rt-radius-xs);
+                background-color: var(--rt-bg-accent-highlight);
+                color: var(--rt-text-accent-highlight);
+                font-weight: var(--rt-font-weight-semibold);
+            }
+
             &:hover {
                 .rtui-side-menu-expand-sub-item-header__icon {
                     color: var(--mdc-list-list-item-hover-leading-icon-color);

package/src/lib/ui-kit/snack-bar/snack-bar.component.scss

@@ -1,5 +1,19 @@
 @use '../../../styles/base/mixin' as mixins;
 
+// Полоса срока: она стягивается слева направо и обрезается тем же путём, каким шла прежде.
+// Обрезка нужна вместе с шириной — у полосы прижаты обе кромки, и одна ширина её не двигает.
+@keyframes rt-snack-bar-progress {
+    from {
+        width: 100%;
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+
+    to {
+        width: 0;
+        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
+    }
+}
+
 $snack-bar: (
     content: (
         gap: 1rem,
@@ -92,9 +106,15 @@ $snack-bar: (
             left: 0;
             width: 100%;
             height: var(--rt-snack-bar-progress-height);
+            animation: rt-snack-bar-progress var(--rt-snack-bar-progress-duration) linear forwards;
             background-color: var(--mat-button-filled-container-color);
             border-bottom-left-radius: var(--mat-snack-bar-container-shape);
             border-bottom-right-radius: var(--mat-snack-bar-container-shape);
         }
     }
 }
+
+// Под указателем срок стоит: сообщение, которое читают, не уходит само.
+:host:hover .rt-snack-bar__progress {
+    animation-play-state: paused;
+}

package/src/lib/ui-kit/spinner/spinner.component.scss

@@ -7,7 +7,7 @@
     align-items: center;
     justify-content: center;
 
-    .c-spinner {
+    .rtui-spinner {
         &__container {
             display: flex;
             width: 100%;

package/src/lib/ui-kit/table/components/pagination-view/rtui-pagination.component.scss

@@ -10,13 +10,13 @@ $pagination: (
         font-weight: 400,
         line-height: 1rem,
     ),
-    container-mobile: (
+    container-clipped: (
         gap: 1rem,
     ),
     paging: (
         gap: 0.5rem,
     ),
-    paging-mobile: (
+    paging-clipped: (
         margin: 0.5rem 0 0 0,
     ),
     paging-item: (
@@ -42,7 +42,7 @@ $pagination: (
         min-width: 3rem,
         height: 2rem,
     ),
-    size-toggle-selector-mobile: (
+    size-toggle-selector-clipped: (
         margin: 0 0 0.5rem 0,
     ),
 );
@@ -69,16 +69,15 @@ $pagination: (
         gap: var(--rt-table-pagination-container-gap);
         line-height: var(--rt-table-pagination-container-line-height);
 
-        &--clipped {
-            flex-direction: column;
-            align-items: flex-start;
-            justify-content: center;
-            gap: var(--rt-table-pagination-container-mobile-gap);
-        }
-
-        &--mobile {
-            width: 100%;
-            justify-content: space-between;
+        // Перенос в столбец — ответ на нехватку ширины под полный список страниц.
+        // На узком экране списка нет вовсе, и строка туда влезает: правило туда не идёт.
+        @include mixins.media-breakpoint-up(vars.$device-xs) {
+            &--clipped {
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                gap: var(--rt-table-pagination-container-clipped-gap);
+            }
         }
 
         .paging {
@@ -88,8 +87,10 @@ $pagination: (
             margin: var(--rt-table-pagination-container-margin);
             gap: var(--rt-table-pagination-paging-gap);
 
-            &--clipped {
-                margin: var(--rt-table-pagination-paging-mobile-margin);
+            @include mixins.media-breakpoint-up(vars.$device-xs) {
+                &--clipped {
+                    margin: var(--rt-table-pagination-paging-clipped-margin);
+                }
             }
 
             &__item {
@@ -148,8 +149,10 @@ $pagination: (
             margin: var(--rt-table-pagination-container-margin);
             gap: var(--rt-table-pagination-size-toggle-gap);
 
-            &--clipped {
-                margin: var(--rt-table-pagination-size-toggle-selector-mobile-margin);
+            @include mixins.media-breakpoint-up(vars.$device-xs) {
+                &--clipped {
+                    margin: var(--rt-table-pagination-size-toggle-selector-clipped-margin);
+                }
             }
 
             &__title {