openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: toast notifications no longer overlap bottom nav on mobile

Browse Source 
Introduced --nav-bottom-height token (56px scroll + 12px dots indicator = 68px)
so that toast-container bottom and app-content padding-bottom both account for
the full nav-bottom height including the page-dots indicator.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ulas
2026-03-31 12:24:12 +02:00
parent ffa0083892
commit 9446173247
3 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+2 -2
View File
@@ -95,7 +95,7 @@
* -------------------------------------------------------- */
.app-content {
flex: 1;
padding-bottom: calc(var(--nav-height-mobile) + 12px + var(--safe-area-inset-bottom));
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom));
overflow-y: auto;
}
@@ -1184,7 +1184,7 @@
* -------------------------------------------------------- */
.toast-container {
position: fixed;
bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom) + var(--space-4));
bottom: calc(var(--nav-bottom-height) + var(--safe-area-inset-bottom) + var(--space-4));
left: 50%;
transform: translateX(-50%);
display: flex;
public/styles/tokens.css
+1
View File
@@ -209,6 +209,7 @@
* 12. Layout
* -------------------------------------------------------- */
--nav-height-mobile: 56px;
--nav-bottom-height: calc(var(--nav-height-mobile) + 12px); /* scroll (56px) + dots-indicator (12px) */
--sidebar-width: 56px; /* collapsed icon-only (1024–1279px) */
--sidebar-width-expanded: 220px; /* full sidebar (1280px+), max 240px laut Spec */
--content-max-width: 1280px;