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

frontend/src/styles/layout.css

@@ -2,17 +2,16 @@
   position: relative;
   max-width: var(--app-max-w);
   margin: 0 auto;
-  min-height: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   background: var(--bg);
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
 }
 
+/* Шапка вне прокручиваемой области по построению — sticky ей больше не нужен. */
 .top-bar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,20 +21,24 @@
 }
 .top-bar .title { font-weight: 700; font-size: 17px; }
 
+/* Единственная прокручиваемая область приложения. */
 .app-main {
   flex: 1;
+  min-height: 0; /* без этого flex-элемент не сжимается и прокрутка уходит в body */
   overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   padding: 14px;
-  padding-bottom: calc(var(--bottombar-height) + var(--fab-height) + var(--safe-bottom) + 28px);
+  /* Подвал теперь в потоке — компенсировать нужно только выступающий купол FAB. */
+  padding-bottom: 24px;
 }
 
+/* Панель — обычный элемент флекс-колонки, не fixed: в мобильных браузерах со
+   скрывающейся адресной строкой fixed-подвал дёргается при прокрутке.
+   position: relative обязателен — на нём держится absolute-позиционирование .fab. */
 .bottom-bar {
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: var(--app-max-w);
+  position: relative;
+  flex: none;
   height: calc(var(--bottombar-height) + var(--safe-bottom));
   padding-bottom: var(--safe-bottom);
   background: var(--surface);
@@ -131,6 +134,7 @@
 
 /* Вкладки админки: горизонтальная карусель (не ломают вёрстку при переполнении) */
 .admin-tabs {
+  flex: none;
   display: flex;
   gap: 8px;
   padding: 10px 14px;
@@ -218,7 +222,7 @@
   position: fixed;
   top: 0;
   right: 0;
-  height: 100%;
+  height: 100dvh;
   width: min(300px, 84vw);
   background: var(--surface);
   border-left: 1px solid var(--border);