diff --git a/frontend/src/components/room/RoomToolbar.tsx b/frontend/src/components/room/RoomToolbar.tsx index ad58bed..257b969 100644 --- a/frontend/src/components/room/RoomToolbar.tsx +++ b/frontend/src/components/room/RoomToolbar.tsx @@ -247,7 +247,14 @@ export function RoomToolbar({ - Мини-окно + {/* На узком экране («Мини-окно» иначе переносится на 2 строки и + кнопка становится выше соседних, см. .label-full/.label-short + в room.css) — только «Мини». Текст, не структура: aria-label + выше уже несёт полный смысл независимо от видимой подписи. */} + + Мини-окно + Мини + )} diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css index 5ba642a..be55555 100644 --- a/frontend/src/styles/room.css +++ b/frontend/src/styles/room.css @@ -277,32 +277,54 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } .stage-show-others svg { width: 18px; height: 18px; flex-shrink: 0; } /* Нижний тулбар: свои кнопки на хуках LiveKit (TrackToggle/DisconnectButton) */ +/* + * Кнопки тулбара плавно уменьшаются (иконка/отступы/шрифт/зазор) на всём + * диапазоне 1200px → 600px — до этого тулбар стал шире, чем при исходном + * проектировании (задачи B1/B2 добавили «Рука»/«Очередь», раньше помещались + * без сжатия 8 кнопок, теперь до 11 — без этого блока получался + * горизонтальный оверфлоу вплоть до самого мобильного брейкпоинта, кнопки + * вылезали за края тулбара). + * + * Обычный `clamp(min, Nvw, max)` тут не подходит: подобранный `N` + * дотягивается до `max` уже на довольно узких экранах (например, + * `3vw` = 24px ровно на 800px viewport) и дальше просто стоит на потолке — + * получается не плавное сжатие в нужном диапазоне, а резкий скачок сильно + * раньше нужной ширины (поймали именно так на первой версии этого блока). + * Вместо этого — явная линейная интерполяция между двумя точками + * (600px→минимум, 1200px→максимум): `calc(MIN + (MAX-MIN) * (100vw - 600px) + * / 600)`, снаружи в `clamp()` только чтобы намертво остановиться на + * границах диапазона. Нижние границы — те же значения, что жёстко + * выставляет мобильный медиа-запрос ниже (`max-width: 600px`), поэтому + * переход в него на 600px визуально бесшовный. + */ .room-toolbar { display: flex; align-items: center; justify-content: center; - gap: var(--space-2); + gap: clamp(2px, calc(2px + (100vw - 600px) * 6 / 600), var(--space-2)); background: var(--color-room-surface); border-top: 1px solid var(--color-room-tile-border); - padding: var(--space-3) var(--space-6); + padding: var(--space-3) clamp(8px, calc(8px + (100vw - 600px) * 16 / 600), var(--space-6)); flex-shrink: 0; } .tb-btn { display: flex; flex-direction: column; align-items: center; - gap: 4px; + gap: clamp(2px, calc(2px + (100vw - 600px) * 2 / 600), 4px); background: transparent; border: none; - padding: 8px 18px; + padding: + clamp(6px, calc(6px + (100vw - 600px) * 2 / 600), 8px) + clamp(6px, calc(6px + (100vw - 600px) * 12 / 600), 18px); border-radius: var(--radius-md); color: var(--color-room-text-primary); - min-width: 76px; + min-width: clamp(0px, calc((100vw - 600px) * 76 / 600), 76px); cursor: pointer; } .tb-btn .icon-shell { - width: 48px; - height: 48px; + width: clamp(40px, calc(40px + (100vw - 600px) * 8 / 600), 48px); + height: clamp(40px, calc(40px + (100vw - 600px) * 8 / 600), 48px); border-radius: 50%; display: flex; align-items: center; @@ -311,9 +333,27 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; } background: var(--color-room-tile); color: var(--color-room-text-primary); } -.tb-btn span.label { font: var(--text-caption); text-transform: none; letter-spacing: normal; color: var(--color-room-text-secondary); font-weight: 500; } +.tb-btn span.label { + font: var(--text-caption); + font-size: clamp(11px, calc(11px + (100vw - 600px) * 1 / 600), 12px); + text-transform: none; + letter-spacing: normal; + color: var(--color-room-text-secondary); + font-weight: 500; +} .tb-btn:hover .icon-shell { background: var(--color-room-tile-hover); } +/* Короткая подпись мини-окна (см. RoomToolbar.tsx) — «Мини-окно» на узком + экране переносится на 2 строки и делает эту кнопку выше соседних; ниже + порога, где начинается перенос, прячем длинный вариант и показываем + короткий «Мини» — кнопка остаётся однострочной и той же высоты, что и + остальные. */ +.tb-btn .label-short { display: none; } +@media (max-width: 1200px) { + .tb-btn .label-full { display: none; } + .tb-btn .label-short { display: inline; } +} + .tb-btn.is-off .icon-shell { background: var(--color-room-mic-off); border-color: var(--color-room-mic-off); color: #3a0f16; } .tb-btn.is-off span.label { color: var(--color-room-mic-off); font-weight: 700; }