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/global.css

@@ -11,6 +11,11 @@ html, body, #root {
   margin: 0;
 }
 
+/* Высота каркаса — по видимой области (dvh): на мобильных 100% берётся от layout
+   viewport, который меняется при сворачивании адресной строки. Правило выше остаётся
+   фоллбэком для движков без dvh. */
+#root { height: 100dvh; }
+
 body {
   background: var(--bg);
   color: var(--text);
@@ -18,6 +23,7 @@ body {
     Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   overscroll-behavior-y: none;
+  overflow: hidden; /* прокручивается только .app-main */
 }
 
 a { color: var(--accent-2); text-decoration: none; }
@@ -190,7 +196,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
 .toast {
   position: fixed;
   left: 50%;
-  bottom: calc(var(--bottombar-height) + 80px);
+  bottom: calc(var(--bottombar-height) + var(--safe-bottom) + 16px);
   transform: translateX(-50%);
   background: var(--surface-2);
   border: 1px solid var(--border);
@@ -206,7 +212,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
 /* ─── Уведомления ─────────────────────────────────────────────────────────── */
 
 /* Зоны верхней панели: слева back/заголовок, по центру название, справа колокольчик */
-.top-bar-left { display: flex; align-items: center; min-width: 0; }
+.top-bar-left { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
 .top-bar-center {
   flex: 1;
   text-align: center;
@@ -215,7 +221,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   white-space: nowrap;
   padding: 0 8px;
 }
-.top-bar-right { display: flex; align-items: center; }
+.top-bar-right { display: flex; align-items: center; flex: none; }
 .top-bar-home {
   background: none;
   border: none;
@@ -223,6 +229,11 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   color: var(--text);
   font-weight: 700;
   font-size: 17px;
+  /* На узких экранах длинное название иначе распирает шапку по горизонтали. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .notif-bell-wrap { position: relative; }
@@ -258,7 +269,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
   top: calc(100% + 8px);
   right: 0;
   width: min(320px, 86vw);
-  max-height: 70vh;
+  max-height: 70dvh;
   overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--border);