From cd5399f88ad688a49be3071c8013b139a4ec8daa Mon Sep 17 00:00:00 2001 From: Max Ronzhin Date: Mon, 3 Aug 2026 01:56:42 +0300 Subject: [PATCH] =?UTF-8?q?fix(auth):=20=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB?= =?UTF-8?q?=D0=BE=D0=B2=D0=BE=D0=BA=20=D0=B2=D1=8B=D0=BB=D0=B5=D0=B7=D0=B0?= =?UTF-8?q?=D0=BB=20=D0=B7=D0=B0=20=D0=B1=D1=80=D0=B5=D0=BD=D0=B4=D0=BE?= =?UTF-8?q?=D0=B2=D1=83=D1=8E=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=88=D0=B8=D1=80=D0=BE=D0=BA=D0=BE=D0=BC=20?= =?UTF-8?q?=D0=BE=D0=BA=D0=BD=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Кегль «Ваша инфраструктура» уменьшался только в @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 в базовое правило вместо только-мобильного. --- frontend/src/styles/auth.css | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css index daa5a3b..e561ca3 100644 --- a/frontend/src/styles/auth.css +++ b/frontend/src/styles/auth.css @@ -16,6 +16,11 @@ position: relative; overflow: hidden; 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 { content: ""; @@ -41,6 +46,12 @@ .brand-headline { font: var(--text-display-lg); 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); margin: 0 0 var(--space-4); max-width: 460px; @@ -51,7 +62,11 @@ max-width: 420px; 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 { background: var(--color-surface-glass); backdrop-filter: blur(16px); @@ -248,10 +263,10 @@ right: -90px; bottom: -90px; } - /* clamp() — на узких экранах слово «инфраструктура» иначе вылезает за - край брендовой панели (см. .brand-panel padding ниже и её overflow:hidden, - обрезающий текст без переноса вместо уменьшения кегля). */ - .brand-headline { max-width: none; font-size: clamp(22px, 6.2vw, 34px); } + /* Кегль теперь считает `.brand-headline` сама (cqw от ширины панели, см. + базовое правило) — здесь снимаем только `max-width:460px`: в сложенной + колонкой раскладке панель может стать шире 460px, а дизайн этого хочет. */ + .brand-headline { max-width: none; } .brand-sub { max-width: none; } .brand-stats { flex-wrap: wrap; } .stat-glass { flex: 1 1 140px; min-width: 0; }