Мобильная адаптация 2.0 — тумблеры больше не круги

После большого адаптивного апдейта накопились репорты: тумблеры настроек раздувались в идеальные круги, чипы тегов становились огромными, окно настроек не влезало в экран, а у названий проектов снизу обрезались хвосты букв — «прогулкой» без нижней части «р» и «у».

Три корневые причины

Аудит показал, что за десятком видимых багов стоят всего три решения в коде.

1. Слишком жадное правило тач-зон. Для удобных пальцу кнопок стоял глобальный минимум 44×44 px на каждую <button> при грубом указателе. Но Radix-переключатель — это тоже <button role="switch"> шириной 32 px: правило надувало его до круга. Починили исключениями:

:where(button):not([role="switch"]):not(.tap-auto) {
  min-height: 44px;
  min-width: 44px;
}

2. Модалки без ограничения высоты. Базовому диалогу не хватало max-height со скроллом — длинные окна просто вылезали за экран. Теперь любая модалка скроллится внутри вьюпорта (100dvh минус отступы, чтобы адресная строка мобильного браузера не ломала расчёт).

3. Заголовки резали хвосты букв. Межстрочный интервал «ровно по шрифту» плюс обрезка длинных названий — и буквы р, у, д лишались нижней части. Лечится одним классом с чуть более свободным интервалом.

Итог

Настоящие действия остались ≥44 px, компактные контролы больше не деформируются, каждый экран прошёл проверку на ширинах 360 и 390 px — без горизонтального скролла.