From 525d6dde1bc913cfa4917861109f6798511715fd Mon Sep 17 00:00:00 2001 From: Max Ronzhin Date: Sun, 26 Jul 2026 12:01:35 +0300 Subject: [PATCH] =?UTF-8?q?fix(room):=20=D1=82=D0=BE=D0=BF=D0=B1=D0=B0?= =?UTF-8?q?=D1=80=20=D0=B8=20=D1=82=D1=83=D0=BB=D0=B1=D0=B0=D1=80=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D0=BE=D0=BC?= =?UTF-8?q?=20=D0=BD=D0=B5=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D0=BD=D1=8F?= =?UTF-8?q?=D0=BB=D0=B8=D1=81=D1=8C=20+=20=D0=BD=D0=B5=20=D1=82=D0=BE?= =?UTF-8?q?=D1=82=20=D0=B1=D0=BB=D0=BE=D0=BA=20=D1=81=D0=BA=D1=80=D1=8B?= =?UTF-8?q?=D0=B2=D0=B0=D0=BB=D1=81=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Правки для узких экранов стояли в середине room.css, а `.tb-btn`/ `.room-toolbar` объявлены ниже — при равной специфичности побеждает порядок в исходнике, поэтому тулбар на мобильном не менялся вовсе (скрылся только инвайт-чип, объявленный выше блока). Блок перенесён в конец файла. В топбаре теперь скрываются название конференции и статус (слева), а чип «№ … / Пригласить» остаётся — с телефона он нужнее (скопировать ссылку и позвать участника). Тулбару добавлены flex-wrap и min-width: 0, чтобы он не вылезал за ширину окна ни при каких подписях кнопок. --- frontend/src/styles/room.css | 54 +++++++++++++++++++++++------------- 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css index ad941f9..b0cb4b8 100644 --- a/frontend/src/styles/room.css +++ b/frontend/src/styles/room.css @@ -115,26 +115,6 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } @media (max-width: 600px) { .stage-tiles.lk-focus-layout { grid-template-columns: 1fr; } .stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); } - - /* Топбар: инвайт-чип (номер + копирование ссылки) убираем — на узком - экране это не помещалось рядом с названием (см. аудит мобильной версии), - сверху остаётся только название конференции и статус «активна». */ - .room-topbar { padding: var(--space-3) var(--space-4); } - .room-invite-chip { display: none; } - - /* Тулбар: демонстрация/полноэкранный режим/мини-окно скрыты на мобильном - (редко нужны с телефона, а тулбар со всеми 8 кнопками физически не - помещается в ширину экрана) — из оставшихся 5 кнопок собираем более - компактный вариант, чтобы они уместились без переноса и горизонтального - скролла. */ - .tb-btn--screenshare, - .tb-btn--fullscreen, - .tb-btn--pip { - display: none; - } - .room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; } - .tb-btn { min-width: 0; padding: 6px 8px; } - .tb-btn .icon-shell { width: 40px; height: 40px; } } /* @@ -500,3 +480,37 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } --lk-grid-gap: var(--space-4); --lk-control-bar-height: 0px; } + +/* ---------- Узкие экраны: топбар и тулбар комнаты ---------- + ВАЖНО: этот блок обязан идти строго ПОСЛЕДНИМ в файле. Селекторы ниже + (`.tb-btn`, `.room-toolbar`) имеют ту же специфичность, что и безусловные + правила выше, а при равной специфичности побеждает порядок в исходнике, а + не факт совпадения media query — тот же грабли уже ловили в + auth.css/calendar.css/lobby.css (см. комментарии там). Первая версия этого + блока стояла в середине файла: `.room-invite-chip` (объявлен ВЫШЕ) скрылся, + а `.tb-btn`/`.room-toolbar` (объявлены НИЖЕ) продолжали побеждать — тулбар + на мобильном не менялся вовсе. + + Топбар: скрываем название конференции и строку статуса — они и так есть + в самой конференции, а вот чип «№ … / Пригласить» с телефона нужен чаще + (скопировать ссылку и позвать участника), поэтому он остаётся. + + Тулбар: демонстрация экрана, полноэкранный режим и мини-окно с телефона + практически не нужны, а все 8 кнопок в ширину экрана физически не + помещаются — скрываем их и уплотняем оставшиеся пять + (микрофон/камера/устройства/чат/выход). `flex-wrap` + `min-width: 0` — + страховка на совсем узких экранах, чтобы футер ни при каких подписях не + вылезал за ширину окна. */ +@media (max-width: 600px) { + .room-topbar { padding: var(--space-3) var(--space-4); justify-content: flex-end; } + .room-title-block { display: none; } + + .tb-btn--screenshare, + .tb-btn--fullscreen, + .tb-btn--pip { display: none; } + + .room-toolbar { padding: var(--space-3) var(--space-2); gap: 2px; flex-wrap: wrap; } + .tb-btn { min-width: 0; padding: 6px 6px; } + .tb-btn .icon-shell { width: 40px; height: 40px; } + .tb-btn span.label { font-size: 11px; } +}