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
CHANGELOG.md
+3
View File
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased] ## [Unreleased]
### Fixed
- Mobile: toast notifications no longer overlap with the bottom navigation bar — introduced `--nav-bottom-height` token (scroll area 56px + dots indicator 12px) used consistently by toast container and app content padding
### Added ### Added
- Notes: client-side full-text search bar in toolbar — filters by title and content instantly; shows "Keine Treffer" empty state when no match - Notes: client-side full-text search bar in toolbar — filters by title and content instantly; shows "Keine Treffer" empty state when no match
- Dashboard: weather widget refresh button (top-right corner) + automatic 30-minute refresh interval; interval is cleared when navigating away - Dashboard: weather widget refresh button (top-right corner) + automatic 30-minute refresh interval; interval is cleared when navigating away
public/styles/layout.css
+2 -2
View File
@@ -95,7 +95,7 @@
* -------------------------------------------------------- */ * -------------------------------------------------------- */
.app-content { .app-content {
flex: 1; 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; overflow-y: auto;
} }
@@ -1184,7 +1184,7 @@
* -------------------------------------------------------- */ * -------------------------------------------------------- */
.toast-container { .toast-container {
position: fixed; 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%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
public/styles/tokens.css
+1
View File
@@ -209,6 +209,7 @@
* 12. Layout * 12. Layout
* -------------------------------------------------------- */ * -------------------------------------------------------- */
--nav-height-mobile: 56px; --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: 56px; /* collapsed icon-only (1024–1279px) */
--sidebar-width-expanded: 220px; /* full sidebar (1280px+), max 240px laut Spec */ --sidebar-width-expanded: 220px; /* full sidebar (1280px+), max 240px laut Spec */
--content-max-width: 1280px; --content-max-width: 1280px;