fix(room): топбар и тулбар комнаты вылезали за экран на мобильном
room-toolbar с 8 кнопками (520px) не помещался в мобильную ширину (375px) — крайние кнопки обрезались без возможности до них доскроллить. На мобильном убираем демонстрацию экрана/полноэкранный режим/мини-окно (редко нужны с телефона) и уплотняем оставшиеся 5 кнопок. В топбаре убираем инвайт-чип (номер + копирование ссылки) — сверху остаются только название конференции и статус.
This commit is contained in:
@@ -127,7 +127,7 @@ export function RoomToolbar({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
{...screenShare.buttonProps}
|
{...screenShare.buttonProps}
|
||||||
className={`tb-btn${screenShare.enabled ? ' is-sharing' : ''}`}
|
className={`tb-btn tb-btn--screenshare${screenShare.enabled ? ' is-sharing' : ''}`}
|
||||||
aria-label={screenShare.enabled ? 'Остановить демонстрацию экрана' : 'Демонстрировать экран'}
|
aria-label={screenShare.enabled ? 'Остановить демонстрацию экрана' : 'Демонстрировать экран'}
|
||||||
>
|
>
|
||||||
<span className="icon-shell">
|
<span className="icon-shell">
|
||||||
@@ -155,7 +155,7 @@ export function RoomToolbar({
|
|||||||
{fullscreenSupported && (
|
{fullscreenSupported && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`tb-btn${fullscreenActive ? ' is-panel-open' : ''}`}
|
className={`tb-btn tb-btn--fullscreen${fullscreenActive ? ' is-panel-open' : ''}`}
|
||||||
aria-label={fullscreenActive ? 'Выйти из полноэкранного режима' : 'Развернуть на весь экран'}
|
aria-label={fullscreenActive ? 'Выйти из полноэкранного режима' : 'Развернуть на весь экран'}
|
||||||
aria-pressed={fullscreenActive}
|
aria-pressed={fullscreenActive}
|
||||||
onClick={onToggleFullscreen}
|
onClick={onToggleFullscreen}
|
||||||
@@ -174,7 +174,7 @@ export function RoomToolbar({
|
|||||||
{pipSupported && (
|
{pipSupported && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`tb-btn${pipActive ? ' is-panel-open' : ''}`}
|
className={`tb-btn tb-btn--pip${pipActive ? ' is-panel-open' : ''}`}
|
||||||
aria-label={pipActive ? 'Свернуть мини-окно' : 'Открыть мини-окно'}
|
aria-label={pipActive ? 'Свернуть мини-окно' : 'Открыть мини-окно'}
|
||||||
aria-pressed={pipActive}
|
aria-pressed={pipActive}
|
||||||
onClick={onTogglePiP}
|
onClick={onTogglePiP}
|
||||||
|
|||||||
@@ -115,6 +115,26 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
|
|||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.stage-tiles.lk-focus-layout { grid-template-columns: 1fr; }
|
.stage-tiles.lk-focus-layout { grid-template-columns: 1fr; }
|
||||||
.stage { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
|
.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; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
Reference in New Issue
Block a user