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
This commit is contained in:
2026-09-07 15:35:09 +03:00
co-authored by Claude Opus 5
parent 5e4e4835f2
commit 81ad2a0403
3 changed files with 5 additions and 6 deletions
+1 -1
View File
@@ -196,7 +196,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--bottombar-height) + var(--safe-bottom) + 16px);
bottom: calc(var(--bottombar-height) + 16px);
transform: translateX(-50%);
background: var(--surface-2);
border: 1px solid var(--border);
+2 -3
View File
@@ -39,8 +39,7 @@
.bottom-bar {
position: relative;
flex: none;
height: calc(var(--bottombar-height) + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
height: var(--bottombar-height);
background: var(--surface);
border-top: 1px solid var(--border);
display: flex;
@@ -70,7 +69,7 @@
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--safe-bottom) + 8px);
bottom: 0;
width: var(--fab-width);
height: var(--fab-height);
border: 1px solid var(--accent);
+2 -2
View File
@@ -22,8 +22,8 @@
--radius-sm: 10px;
/* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при
viewport-fit=cover отдаёт inset поверх уже смещённого вьюпорта — без ограничения
шапка раздувается вдвое, а её содержимое съезжает вниз. */
--safe-bottom: min(env(safe-area-inset-bottom, 0px), 24px);
шапка раздувается вдвое, а её содержимое съезжает вниз. Снизу отступ не нужен:
подвал и купол FAB прижаты вплотную к нижнему краю экрана. */
--safe-top: min(env(safe-area-inset-top, 0px), 24px);
/* Брейкпоинты (для справки) */