fix(room): адаптивный тулбар — плавное сжатие кнопок вместо оверфлоу
Задачи B1/B2 добавили в тулбар «Рука» и «Очередь» (до 11 кнопок вместо исходных 8) — на промежуточных ширинах (~600–1100px) кнопки вылезали за края тулбара: жёсткого мобильного брейкпоинта (≤600px, скрывает три кнопки) не хватало, а до него сжатия не было вовсе. Иконка/отступы/зазоры/шрифт кнопок теперь плавно уменьшаются на диапазоне 1200px → 600px через `clamp()` с явной линейной интерполяцией (обычный `clamp(min, Nvw, max)` не подошёл — подобранный N упирался в потолок уже на довольно широких экранах, сжатие получалось резким скачком заметно раньше нужной ширины, а не плавным). Нижние границы совпадают с тем, что жёстко выставляет мобильный медиа-запрос на 600px — переход в него визуально бесшовный. Побочный эффект сжатия: подпись «Мини-окно» на промежуточных ширинах переносилась на 2 строки и делала эту кнопку выше соседних. Ниже 1200px показываем короткое «Мини» вместо полной подписи — кнопка остаётся однострочной; aria-label по-прежнему несёт полный смысл для скринридеров.
This commit is contained in:
@@ -247,7 +247,14 @@ export function RoomToolbar({
|
||||
<span className="icon-shell">
|
||||
<PictureInPicture2 className="lucide" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="label">Мини-окно</span>
|
||||
{/* На узком экране («Мини-окно» иначе переносится на 2 строки и
|
||||
кнопка становится выше соседних, см. .label-full/.label-short
|
||||
в room.css) — только «Мини». Текст, не структура: aria-label
|
||||
выше уже несёт полный смысл независимо от видимой подписи. */}
|
||||
<span className="label">
|
||||
<span className="label-full">Мини-окно</span>
|
||||
<span className="label-short">Мини</span>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user