/* shared/design-system/responsive.css * ============================================================================ * ОБЩИЙ МОБИЛЬНЫЙ СЛОЙ ПЛАТФОРМЫ * ============================================================================ * * Подключается сразу после tokens.css на ВСЕХ страницах. Ничего не * переписывает — только не даёт вёрстке разъезжаться на узких экранах. * * ── Канонические брейкпоинты ──────────────────────────────────────────────── * * sm max-width: 599px телефон одна колонка, off-canvas меню * md max-width: 1023px планшет / узкий сайдбар скрыт, сетки 1–2 колонки * lg min-width: 1024px десктоп НЕ ТРОГАЕМ, всё как было * * Новые правила пишем только через эти три точки. Исторический разнобой * (640 / 720 / 760 / 900 / 1100 и ещё сорок значений) мигрируем к ним * по мере того, как он начинает мешать. * * ВАЖНО: здесь нет и не должно быть `overflow-x: hidden` на body. Это не * лечит горизонтальный скролл, а прячет его — и заодно ломает position:sticky. * Каждую поломку чиним в её источнике. * ========================================================================== */ /* ── 1. Базовая гигиена (на всех ширинах) ───────────────────────────────── */ /* Медиа не должна вылезать за свой контейнер. Самая частая причина обреза справа на телефоне — картинка с жёсткими width/height из вёрстки. Это единственное правило вне медиа-запроса: оно безопасно для десктопа (срабатывает только когда картинка и так шире родителя) и нужно везде. Всё остальное, что влияет на min-content ширину (svg, overflow-wrap), намеренно живёт внутри @media ≤1023px: на десктопе такие правила умеют незаметно менять раскладку флексов, а десктоп мы не трогаем. */ img, video, canvas, iframe, embed, object { max-width: 100%; } /* Код и преформатированный текст скроллятся внутри себя, а не всей страницей. */ pre { overflow-x: auto; max-width: 100%; } /* ── 2. Планшет и телефон: md (≤1023px) ─────────────────────────────────── */ @media (max-width: 1023px) { /* Картинки и векторные иконки не задают ширину экрана. */ img, video { height: auto; } svg { max-width: 100%; } /* Длинные слова, e-mail, ссылки и id не должны распирать карточку. `anywhere` вместо `break-word`: последний не влияет на min-content ширину, то есть флекс-элемент всё равно останется широким. */ p, li, dd, dt, figcaption, blockquote, td, th, label, :is(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; word-break: normal; } /* Код — исключение: его ломать по буквам нельзя. */ pre, code, samp, kbd { overflow-wrap: normal; word-break: normal; } /* ГЛАВНОЕ ИСПРАВЛЕНИЕ. В shared/legacy/styles.css body — это центрирующий флекс-контейнер (`display:flex; justify-content:center; align-items:center`). На десктопе это работает, на телефоне — нет: дети body становятся флекс-элементами с `min-width: auto` и физически не могут сжаться уже своей min-content ширины. На viewport 360px .legal-shell получал ширину 427px и уезжал за левый край (left = -103px), а весь документ — горизонтальный скролл. Разворачиваем контейнер в колонку и растягиваем детей по ширине. Вертикальное центрирование на телефоне и не нужно: контент всё равно выше экрана. */ body { flex-direction: column; align-items: stretch; justify-content: flex-start; } /* Снимаем `min-width: auto` с прямых детей body — теперь они реально умеют сжиматься до ширины экрана. */ body > * { min-width: 0; max-width: 100%; } /* Тот же запрет на «нерушимую» ширину внутри типовых контейнеров компоновки. Без этого один широкий потомок распирает всю цепочку. */ .container, .dashboard-container, .glass-card, .legal-shell, .legal-card, [class*="__inner"], [class*="-layout"], [class*="-grid"] { min-width: 0; max-width: 100%; } /* Флекс- и грид-элементы по умолчанию не сжимаются ниже контента. В подавляющем большинстве наших сеток это нежелательно. */ .container > *, .dashboard-container > *, .glass-card > * { min-width: 0; } /* Таблицы: скролл внутри своей обёртки, а не всей страницы. Обёртку добавляет shared/runtime/responsive-tables.js — если её нет, таблица всё равно не распирает родителя. */ .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .table-scroll > table { min-width: max-content; } } /* ── 3. Телефон: sm (≤599px) ────────────────────────────────────────────── */ @media (max-width: 599px) { /* iOS Safari зумит страницу при фокусе в поле со шрифтом меньше 16px. Это самый заметный «прыжок» вёрстки на айфоне при заполнении формы. */ input, select, textarea { font-size: max(16px, 1em); } /* Ниже 12px текст на телефоне нечитаем. Мелкие подписи (eyebrow, caption) подтягиваем до минимума, не трогая тех, кто уже крупнее. */ small, .caption, .legal-footer-full__bottom, [class*="eyebrow"], [class*="-hint"], [class*="-note"] { font-size: max(12px, 0.75rem); } /* Тач-таргеты. Только для интерактива в навигации и формах — не вешаем min-height на каждую ссылку в тексте параграфа, это ломает типографику. */ nav a, nav button, [role="tablist"] a, [role="tablist"] button, .btn, button:not([class*="icon"]):not([class*="close"]), input[type="submit"], input[type="button"] { min-height: 44px; } /* Кнопки-иконки — квадрат 40x40, этого достаточно и не распирает шапку. */ button[class*="icon"], button[class*="close"] { min-width: 40px; min-height: 40px; } /* Фиксированные нижние панели (cookie-баннер, панели действий, нижние листы) не должны прятаться под домашний индикатор iPhone. */ .safe-bottom, [class*="bottom-bar"], [class*="bottom-sheet"] { padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* Горизонтальные ряды «чипов»/табов на телефоне листаем, а не ломаем. */ .scroll-row { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .scroll-row::-webkit-scrollbar { display: none; } .scroll-row > * { flex: 0 0 auto; } } /* ── 4. Отладка ─────────────────────────────────────────────────────────── */ /* document.body.classList.add('debug-overflow') в консоли — и всё, что шире экрана, подсветится красным. Быстрый способ найти виновника на месте. */ .debug-overflow * { outline: 1px solid rgba(255, 0, 0, 0.25); } /* ── 5. Системные панели Android ─────────────────────────────────────────── */ /* С Android 15 браузер рисует страницу под системной панелью навигации, а сама панель становится прозрачной и показывает то, что под ней. Работает это только при `viewport-fit=cover` в meta viewport — он проставлен на всех страницах и в генераторе юридических страниц. Фон под панелью берётся с корня документа, а не с body: если контент короче экрана, снизу останется белая полоса вместо цвета темы. Цвет верхней панели браузера и общий тон системных панелей задаёт meta[name=theme-color], который обновляет shared/runtime/theme-toggle.js при каждой смене темы. */ html { background-color: var(--ws-bg); } /* Без viewport-fit=cover env(safe-area-inset-*) всегда возвращает 0, то есть до этой правки весь код с safe-area ниже по файлу не работал вообще. */ @media (max-width: 1023px) { /* Нижние фиксированные панели не должны попадать под системную полосу навигации и под домашний индикатор. */ .mobile-nav-scrim, [class*="bottom-bar"], [class*="bottom-sheet"], .safe-bottom { padding-bottom: max(0px, env(safe-area-inset-bottom)); } }