Дебаг вёрстки шапки и подвала сайта (#4) #18

Merged
NotBigGhost merged 5 commits from issue-4-header-footer-layout into dev 2026-09-07 15:53:40 +03:00
5 Commits
Author SHA1 Message Date
NotBigGhostandClaude Opus 5 534ba640cc UI: комментарий у купола FAB — под новую геометрию
База купола теперь на нижнем крае экрана, а не смещена относительно
кромки панели, и размеры стали 140x70. Комментарий описывал прежнее
положение.

#4

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ps52xzuUXnWrJ5SRnEeaLk
2026-09-07 15:51:19 +03:00
NotBigGhostandClaude Opus 5 09be0f57c6 UI: купол кнопки создания партии — 140x70
Пропорция полукруга сохранена (ширина = 2x высоты), над кромкой панели
купол снова выступает — на 6px при высоте подвала 64px. Прежние 125x62.5
после прижатия базы к нижнему краю утапливали купол в панель.

#4

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ps52xzuUXnWrJ5SRnEeaLk
2026-09-07 15:41:30 +03:00
NotBigGhostandClaude Opus 5 2a4c5d9d25 UI: шапка вплотную к верхнему краю — снят viewport-fit=cover
В DuckDuckGo шапка держала отступ от адресной строки — тот же safe-area,
что раньше отодвигал подвал снизу. Insets браузер отдаёт именно из-за
viewport-fit=cover: он передаёт управление безопасной зоной странице.
После отказа от отступов сверху и снизу компенсировать нечего, поэтому
cover снят — вьюпорт снова размещает браузер, а env() везде даёт ноль.

Следом убран --safe-top и три его использования (.top-bar, .side-menu,
.toast-top-wrap): без cover переменная всегда нулевая. Токенов safe-area
в проекте больше нет.

#4

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ps52xzuUXnWrJ5SRnEeaLk
2026-09-07 15:40:51 +03:00
NotBigGhostandClaude Opus 5 81ad2a0403 UI: подвал и купол FAB вплотную к нижнему краю экрана
Подвал держал внутренний отступ в safe-area снизу, а купол FAB был
дополнительно поднят на 8px — у нижней кромки оставалась пустая полоса.
Отступ снят: высота панели равна --bottombar-height, база купола на
нулевой отметке. Токен --safe-bottom больше нигде не используется и
удалён, отступ сверху (--safe-top) остаётся у шапки.

#4

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ps52xzuUXnWrJ5SRnEeaLk
2026-09-07 15:35:09 +03:00
NotBigGhostandClaude Opus 5 5e4e4835f2 UI: шапка и подвал вне прокрутки — каркас на 100dvh
Подвал был position: fixed, шапка — position: sticky при html/body с
height: 100%. В мобильных браузерах со скрывающейся адресной строкой
layout viewport меняет высоту при прокрутке: fixed-подвал за ним
дёргается, а у sticky-шапки нет однозначного прокручиваемого предка.

Каркас переведён на 100dvh с единственной прокручиваемой областью
(.app-main) — шапка и подвал стали обычными элементами флекс-колонки и
дёргаться им больше нечем. Safe-area ограничена потолком 24px: при
viewport-fit=cover часть браузеров (DuckDuckGo, Firefox Focus) отдаёт
inset поверх уже смещённого вьюпорта, из-за чего шапка раздувалась вдвое,
а надпись и колокольчик съезжали вниз. Заодно шапка защищена от
распирания длинным названием на узких экранах.

#4

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ps52xzuUXnWrJ5SRnEeaLk
2026-09-07 15:24:41 +03:00