From 84e2ab8756fddd9190516e8f6540c16b0ac16cc7 Mon Sep 17 00:00:00 2001
From: Max Ronzhin <m.ronzhin@ssphera.ru>
Date: Sun, 26 Jul 2026 04:19:53 +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=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BD=D0=B0=D1=82=D1=8B=20=D0=B2=D1=8B=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=BB=D0=B8=20=D0=B7=D0=B0=20=D1=8D=D0=BA=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BD=20=D0=BD=D0=B0=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

room-toolbar с 8 кнопками (520px) не помещался в мобильную ширину (375px) —
крайние кнопки обрезались без возможности до них доскроллить. На мобильном
убираем демонстрацию экрана/полноэкранный режим/мини-окно (редко нужны с
телефона) и уплотняем оставшиеся 5 кнопок. В топбаре убираем инвайт-чип
(номер + копирование ссылки) — сверху остаются только название конференции
и статус.
---
 frontend/src/components/room/RoomToolbar.tsx |  6 +++---
 frontend/src/styles/room.css                 | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/room/RoomToolbar.tsx b/frontend/src/components/room/RoomToolbar.tsx
index 228b684..546181a 100644
--- a/frontend/src/components/room/RoomToolbar.tsx
+++ b/frontend/src/components/room/RoomToolbar.tsx
@@ -127,7 +127,7 @@ export function RoomToolbar({
       <button
         type="button"
         {...screenShare.buttonProps}
-        className={`tb-btn${screenShare.enabled ? ' is-sharing' : ''}`}
+        className={`tb-btn tb-btn--screenshare${screenShare.enabled ? ' is-sharing' : ''}`}
         aria-label={screenShare.enabled ? 'Остановить демонстрацию экрана' : 'Демонстрировать экран'}
       >
         <span className="icon-shell">
@@ -155,7 +155,7 @@ export function RoomToolbar({
       {fullscreenSupported && (
         <button
           type="button"
-          className={`tb-btn${fullscreenActive ? ' is-panel-open' : ''}`}
+          className={`tb-btn tb-btn--fullscreen${fullscreenActive ? ' is-panel-open' : ''}`}
           aria-label={fullscreenActive ? 'Выйти из полноэкранного режима' : 'Развернуть на весь экран'}
           aria-pressed={fullscreenActive}
           onClick={onToggleFullscreen}
@@ -174,7 +174,7 @@ export function RoomToolbar({
       {pipSupported && (
         <button
           type="button"
-          className={`tb-btn${pipActive ? ' is-panel-open' : ''}`}
+          className={`tb-btn tb-btn--pip${pipActive ? ' is-panel-open' : ''}`}
           aria-label={pipActive ? 'Свернуть мини-окно' : 'Открыть мини-окно'}
           aria-pressed={pipActive}
           onClick={onTogglePiP}
diff --git a/frontend/src/styles/room.css b/frontend/src/styles/room.css
index ace1e09..ad941f9 100644
--- a/frontend/src/styles/room.css
+++ b/frontend/src/styles/room.css
@@ -115,6 +115,26 @@ 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; }
 }
 
 /*