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; }