fix(auth): заголовок вылезал за брендовую панель на широком окне
Some checks failed
CI / backend (push) Has been cancelled
CI / frontend (push) Has been cancelled

Кегль «Ваша инфраструктура» уменьшался только в @media по ширине ОКНА —
не спасало, когда окно широкое, а панель (42% от него, `.layout` flex
42/58) сама по себе узкая: слово не помещалось, overflow:hidden обрезал
его вместо переноса. Перешли на container query (`container-type:
inline-size` на .brand-panel + `cqw` на .brand-headline) — тот же приём,
что у аватара участника в комнате (container-type:size + cqmin,
room.css). Кегль теперь считается от реальной ширины панели, а не окна,
в любой раскладке.

Тем же механизмом клипались плашки .brand-stats («AI-саммари») — добавлен
flex-wrap в базовое правило вместо только-мобильного.
This commit is contained in:
2026-08-03 01:56:42 +03:00
parent 2be799b19d
commit cd5399f88a

View File

@@ -16,6 +16,11 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
/* Запрос по ширине САМОЙ панели, а не окна: `.layout` — flex 42/58, и на
широком окне с узкой панелью `vw` (см. .brand-headline) не отражает
реальную доступную ширину — тот же паттерн, что у `.room-tile-avatar`
(container-type:size + cqmin, room.css) для аватара участника. */
container-type: inline-size;
} }
.brand-panel::after { .brand-panel::after {
content: ""; content: "";
@@ -41,6 +46,12 @@
.brand-headline { .brand-headline {
font: var(--text-display-lg); font: var(--text-display-lg);
font-family: var(--font-display); font-family: var(--font-display);
/* `cqw` — от ширины `.brand-panel` (её `container-type: inline-size` выше),
а не окна: длинное слово «инфраструктура» иначе не помещается именно
тогда, когда окно широкое, а панель (42% от него) — узкая. Раньше кегль
уменьшался только в @media по ширине ОКНА (узкие экраны) — не спасало
от этого случая. */
font-size: clamp(20px, 8cqw, 34px);
color: var(--color-ink-700); color: var(--color-ink-700);
margin: 0 0 var(--space-4); margin: 0 0 var(--space-4);
max-width: 460px; max-width: 460px;
@@ -51,7 +62,11 @@
max-width: 420px; max-width: 420px;
margin: 0; margin: 0;
} }
.brand-stats { display: flex; gap: var(--space-4); z-index: 1; margin-top: var(--space-8); } /* `flex-wrap` не только на мобильном медиа-запросе (см. ниже) — та же
природа бага, что у заголовка: узкая ПАНЕЛЬ (а не узкое окно) не даёт
двум плашкам поместиться в ряд, а `overflow:hidden` у `.brand-panel`
обрезал вторую вместо переноса. */
.brand-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); z-index: 1; margin-top: var(--space-8); }
.stat-glass { .stat-glass {
background: var(--color-surface-glass); background: var(--color-surface-glass);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
@@ -248,10 +263,10 @@
right: -90px; right: -90px;
bottom: -90px; bottom: -90px;
} }
/* clamp() — на узких экранах слово «инфраструктура» иначе вылезает за /* Кегль теперь считает `.brand-headline` сама (cqw от ширины панели, см.
край брендовой панели (см. .brand-panel padding ниже и её overflow:hidden, базовое правило) — здесь снимаем только `max-width:460px`: в сложенной
обрезающий текст без переноса вместо уменьшения кегля). */ колонкой раскладке панель может стать шире 460px, а дизайн этого хочет. */
.brand-headline { max-width: none; font-size: clamp(22px, 6.2vw, 34px); } .brand-headline { max-width: none; }
.brand-sub { max-width: none; } .brand-sub { max-width: none; }
.brand-stats { flex-wrap: wrap; } .brand-stats { flex-wrap: wrap; }
.stat-glass { flex: 1 1 140px; min-width: 0; } .stat-glass { flex: 1 1 140px; min-width: 0; }