Мобильные устройства: шапка сайта в 2 раза шире, чем должна быть, надпись и иконка уведомлений сильно съехала вниз. Также нужно проверить её статичность. Подвал сайта дёргается при скроле, его нужно сделать статичным. Заодно проверить актуальность привязок размеров. Проблемы с вёрсткой в основном в браузерах DuckDuckGo и Firefox Foxus.
Мобильные устройства: шапка сайта в 2 раза шире, чем должна быть, надпись и иконка уведомлений сильно съехала вниз. Также нужно проверить её статичность. Подвал сайта дёргается при скроле, его нужно сделать статичным. Заодно проверить актуальность привязок размеров. Проблемы с вёрсткой в основном в браузерах DuckDuckGo и Firefox Foxus.
NotBigGhost
added this to the v1.35 - промежуточная полировка версии 1.3 milestone 2026-09-06 19:11:11 +03:00
Разбор кода даёт общую причину для всех четырёх пунктов задачи: каркас построен на height: 100% + position: fixed подвале + position: sticky шапке. В мобильных браузерах со скрывающейся адресной строкой layout viewport меняет высоту при прокрутке, fixed-подвал за ним «плывёт», а env(safe-area-inset-top) при viewport-fit=cover накладывается поверх уже смещённого браузером вьюпорта — отсюда и вдвое толще шапка со съехавшим вниз содержимым.
global.css — каркас на 100dvh (#root), body { overflow: hidden } — прокручивается только .app-main; .notif-panel70vh → 70dvh; .toast пересчитать под подвал в потоке.
global.css — защита шапки от переполнения по горизонтали: .top-bar-home не сжимается и не обрезается, добавляются min-width: 0 + ellipsis.
layout.css — .app-shell на height: 100%; overflow: hidden; .top-bar теряет sticky и становится flex: none; .app-main получает min-height: 0 и уменьшенный padding-bottom (154.5px → 24px); .bottom-bar из fixed переводится в обычный элемент флекс-колонки (position: relative; flex: none) — дёргаться становится физически нечему.
layout.css — сопутствующее в новом каркасе: .admin-tabs { flex: none }, .side-menu { height: 100dvh }.
Геометрия FAB проверена и не меняется: --fab-width: 125px / --fab-height: 62.5px дают ровный полукруг, выступ над кромкой панели в 6.5px — задуманный «купол».
Изменения только в CSS: эндпойнты и модели не затрагиваются, регенерация schema.d.ts и миграции не нужны.
Критерии готовности
Прокручивается только .app-main; шапка и подвал неподвижны при прокрутке и не перекрываются контентом.
Высота шапки = 12px + контент + 12px плюс не более 24px safe-area; надпись и колокольчик вертикально по центру.
При ширине экрана 320px шапка не выходит за границы .app-shell — горизонтальной прокрутки нет.
Раскладки /login и /admin/* (тот же .app-shell) не сломаны, вкладки админки по-прежнему прокручиваются горизонтально.
npm run build (tsc --noEmit && vite build) зелёный.
Вне рамок: реальные DuckDuckGo и Firefox Focus на устройстве проверить нечем — правки бьют по механизмам, вызывающим симптомы, но финальное подтверждение на телефоне за вами.
Ветка:issue-4-header-footer-layout от dev
## План выполнения
Разбор кода даёт общую причину для всех четырёх пунктов задачи: каркас построен на `height: 100%` + `position: fixed` подвале + `position: sticky` шапке. В мобильных браузерах со скрывающейся адресной строкой layout viewport меняет высоту при прокрутке, `fixed`-подвал за ним «плывёт», а `env(safe-area-inset-top)` при `viewport-fit=cover` накладывается поверх уже смещённого браузером вьюпорта — отсюда и вдвое толще шапка со съехавшим вниз содержимым.
1. `tokens.css` — ограничить `--safe-top` / `--safe-bottom` через `min(env(...), 24px)`: аномальный inset перестаёт раздувать шапку.
2. `global.css` — каркас на `100dvh` (`#root`), `body { overflow: hidden }` — прокручивается только `.app-main`; `.notif-panel` `70vh` → `70dvh`; `.toast` пересчитать под подвал в потоке.
3. `global.css` — защита шапки от переполнения по горизонтали: `.top-bar-home` не сжимается и не обрезается, добавляются `min-width: 0` + ellipsis.
4. `layout.css` — `.app-shell` на `height: 100%; overflow: hidden`; `.top-bar` теряет `sticky` и становится `flex: none`; `.app-main` получает `min-height: 0` и уменьшенный `padding-bottom` (154.5px → 24px); `.bottom-bar` из `fixed` переводится в обычный элемент флекс-колонки (`position: relative; flex: none`) — дёргаться становится физически нечему.
5. `layout.css` — сопутствующее в новом каркасе: `.admin-tabs { flex: none }`, `.side-menu { height: 100dvh }`.
Геометрия FAB проверена и не меняется: `--fab-width: 125px` / `--fab-height: 62.5px` дают ровный полукруг, выступ над кромкой панели в 6.5px — задуманный «купол».
Изменения только в CSS: эндпойнты и модели не затрагиваются, регенерация `schema.d.ts` и миграции не нужны.
**Критерии готовности**
- Прокручивается только `.app-main`; шапка и подвал неподвижны при прокрутке и не перекрываются контентом.
- Высота шапки = 12px + контент + 12px плюс не более 24px safe-area; надпись и колокольчик вертикально по центру.
- При ширине экрана 320px шапка не выходит за границы `.app-shell` — горизонтальной прокрутки нет.
- Раскладки `/login` и `/admin/*` (тот же `.app-shell`) не сломаны, вкладки админки по-прежнему прокручиваются горизонтально.
- `npm run build` (`tsc --noEmit && vite build`) зелёный.
**Вне рамок:** реальные DuckDuckGo и Firefox Focus на устройстве проверить нечем — правки бьют по механизмам, вызывающим симптомы, но финальное подтверждение на телефоне за вами.
**Ветка:** `issue-4-header-footer-layout` от `dev`
Итог: каркас переведён на 100dvh с единственной прокручиваемой областью — шапка и подвал стали обычными элементами флекс-колонки, fixed-подвалу больше нечем дёргаться, sticky шапке не нужен. Safe-area ограничена потолком 24px, что убирает раздувание шапки вдвое и съезжающее вниз содержимое; заодно шапка защищена от распирания на узких экранах. Правки только в CSS (tokens.css, global.css, layout.css).
Проверки:npm run build — зелёный; pytest — 65 passed. Визуальная проверка в браузере не выполнена: расширение Claude in Chrome не подключено к сессии — подтверждение на реальных DuckDuckGo и Firefox Focus остаётся за вами.
Статус:Status/In Review Осталось за вами: ревью и мёрж PR — задача закроется автоматически.
Работа выполнена, открыт PR: https://gitea.arseniev.info/NotBigGhost/ForbiddenStarsApp/pulls/18
**Итог:** каркас переведён на `100dvh` с единственной прокручиваемой областью — шапка и подвал стали обычными элементами флекс-колонки, `fixed`-подвалу больше нечем дёргаться, `sticky` шапке не нужен. Safe-area ограничена потолком 24px, что убирает раздувание шапки вдвое и съезжающее вниз содержимое; заодно шапка защищена от распирания на узких экранах. Правки только в CSS (`tokens.css`, `global.css`, `layout.css`).
**Проверки:** `npm run build` — зелёный; `pytest` — 65 passed. Визуальная проверка в браузере не выполнена: расширение Claude in Chrome не подключено к сессии — подтверждение на реальных DuckDuckGo и Firefox Focus остаётся за вами.
**Статус:** `Status/In Review`
**Осталось за вами:** ревью и мёрж PR — задача закроется автоматически.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Мобильные устройства: шапка сайта в 2 раза шире, чем должна быть, надпись и иконка уведомлений сильно съехала вниз. Также нужно проверить её статичность. Подвал сайта дёргается при скроле, его нужно сделать статичным. Заодно проверить актуальность привязок размеров. Проблемы с вёрсткой в основном в браузерах DuckDuckGo и Firefox Foxus.
План выполнения
Разбор кода даёт общую причину для всех четырёх пунктов задачи: каркас построен на
height: 100%+position: fixedподвале +position: stickyшапке. В мобильных браузерах со скрывающейся адресной строкой layout viewport меняет высоту при прокрутке,fixed-подвал за ним «плывёт», аenv(safe-area-inset-top)приviewport-fit=coverнакладывается поверх уже смещённого браузером вьюпорта — отсюда и вдвое толще шапка со съехавшим вниз содержимым.tokens.css— ограничить--safe-top/--safe-bottomчерезmin(env(...), 24px): аномальный inset перестаёт раздувать шапку.global.css— каркас на100dvh(#root),body { overflow: hidden }— прокручивается только.app-main;.notif-panel70vh→70dvh;.toastпересчитать под подвал в потоке.global.css— защита шапки от переполнения по горизонтали:.top-bar-homeне сжимается и не обрезается, добавляютсяmin-width: 0+ ellipsis.layout.css—.app-shellнаheight: 100%; overflow: hidden;.top-barтеряетstickyи становитсяflex: none;.app-mainполучаетmin-height: 0и уменьшенныйpadding-bottom(154.5px → 24px);.bottom-barизfixedпереводится в обычный элемент флекс-колонки (position: relative; flex: none) — дёргаться становится физически нечему.layout.css— сопутствующее в новом каркасе:.admin-tabs { flex: none },.side-menu { height: 100dvh }.Геометрия FAB проверена и не меняется:
--fab-width: 125px/--fab-height: 62.5pxдают ровный полукруг, выступ над кромкой панели в 6.5px — задуманный «купол».Изменения только в CSS: эндпойнты и модели не затрагиваются, регенерация
schema.d.tsи миграции не нужны.Критерии готовности
.app-main; шапка и подвал неподвижны при прокрутке и не перекрываются контентом..app-shell— горизонтальной прокрутки нет./loginи/admin/*(тот же.app-shell) не сломаны, вкладки админки по-прежнему прокручиваются горизонтально.npm run build(tsc --noEmit && vite build) зелёный.Вне рамок: реальные DuckDuckGo и Firefox Focus на устройстве проверить нечем — правки бьют по механизмам, вызывающим симптомы, но финальное подтверждение на телефоне за вами.
Ветка:
issue-4-header-footer-layoutотdevРабота выполнена, открыт PR: #18
Итог: каркас переведён на
100dvhс единственной прокручиваемой областью — шапка и подвал стали обычными элементами флекс-колонки,fixed-подвалу больше нечем дёргаться,stickyшапке не нужен. Safe-area ограничена потолком 24px, что убирает раздувание шапки вдвое и съезжающее вниз содержимое; заодно шапка защищена от распирания на узких экранах. Правки только в CSS (tokens.css,global.css,layout.css).Проверки:
npm run build— зелёный;pytest— 65 passed. Визуальная проверка в браузере не выполнена: расширение Claude in Chrome не подключено к сессии — подтверждение на реальных DuckDuckGo и Firefox Focus остаётся за вами.Статус:
Status/In ReviewОсталось за вами: ревью и мёрж PR — задача закроется автоматически.