docs: уточнить в CHANGELOG поведение топбара комнаты на мобильном

В записи 0.0.3 было описано обратное: скрывается не инвайт-чип, а название конференции со строкой статуса — чип «№ … / Пригласить» остаётся.
fix(room): топбар и тулбар на мобильном не применялись + не тот блок скрывался
2026-07-26 12:11:50 +03:00 · 2026-07-26 12:01:35 +03:00
2 changed files with 36 additions and 21 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,8 @@
  возможности до них докрутить). На мобильном тулбар сокращён до
  микрофона/камеры/устройств/чата/выхода (демонстрация экрана,
  полноэкранный режим и мини-окно скрыты — редко нужны с телефона), в топбаре
-  скрыт инвайт-чип, остаются только название конференции и статус.
+  скрыты название конференции и строка статуса, а чип «№ … / Пригласить»
+  оставлен — с телефона он нужнее.
 - Админка: заголовок и 4 вкладки раздела не помещались в ширину (вкладки
  переносятся в 2 ряда, поясняющий текст под заголовком скрыт на мобильном);
  таблицы «Конференции» и «Пользователи» обрезались вбок — на мобильном в них
--- 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; }
+}