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