NotBigGhost/ForbiddenStarsApp
1
1
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UI: подвал и купол FAB вплотную к нижнему краю экрана

Browse Source 
Подвал держал внутренний отступ в 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:
NotBigGhost
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/global.css
+1 -1
View File
@@ -196,7 +196,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.toast { .toast {
position: fixed; position: fixed;
left: 50%; left: 50%;
bottom: calc(var(--bottombar-height) + var(--safe-bottom) + 16px); bottom: calc(var(--bottombar-height) + 16px);
transform: translateX(-50%); transform: translateX(-50%);
background: var(--surface-2); background: var(--surface-2);
border: 1px solid var(--border); border: 1px solid var(--border);
frontend/src/styles/layout.css
+2 -3
View File
@@ -39,8 +39,7 @@
.bottom-bar { .bottom-bar {
position: relative; position: relative;
flex: none; flex: none;
height: calc(var(--bottombar-height) + var(--safe-bottom)); height: var(--bottombar-height);
padding-bottom: var(--safe-bottom);
background: var(--surface); background: var(--surface);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
display: flex; display: flex;
@@ -70,7 +69,7 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: calc(var(--safe-bottom) + 8px); bottom: 0;
width: var(--fab-width); width: var(--fab-width);
height: var(--fab-height); height: var(--fab-height);
border: 1px solid var(--accent); border: 1px solid var(--accent);
frontend/src/styles/tokens.css
+2 -2
View File
@@ -22,8 +22,8 @@
--radius-sm: 10px; --radius-sm: 10px;
/* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при /* Safe-area с потолком: часть мобильных браузеров (DuckDuckGo, Firefox Focus) при
viewport-fit=cover отдаёт inset поверх уже смещённого вьюпорта — без ограничения 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); --safe-top: min(env(safe-area-inset-top, 0px), 24px);
/* Брейкпоинты (для справки) */ /* Брейкпоинты (для справки) */