diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css index 21572ad..b5aa03e 100644 --- a/backend/static/css/layout.css +++ b/backend/static/css/layout.css @@ -10,44 +10,30 @@ #app { display: flex; flex-direction: column; - height: 100dvh; /* dvh = dynamic viewport inkl. safe areas */ - overflow: hidden; + min-height: 100dvh; } -/* Content-Bereich scrollt intern — kein padding-bottom nötig da Nav Flex-Kind */ +/* Content-Bereich: füllt den Raum zwischen Header und Bottom-Nav */ #page-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; + padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px); -webkit-overflow-scrolling: touch; - overscroll-behavior-y: none; + overscroll-behavior-y: none; /* iOS-Bounce verhindert fixed-Nav-Drift */ } -/* Vollbild-Seiten: #page-content kein Scroll */ -body.page-fullscreen #page-content { - overflow: hidden; -} - -/* Desktop: window-scroll, Sidebar-Layout */ +/* Desktop: Sidebar-Layout */ @media (min-width: 768px) { #app { - height: auto; - min-height: 100dvh; - overflow: visible; flex-direction: row; } #page-content { - flex: unset; min-height: unset; - overflow-y: visible; - overflow-x: visible; padding-bottom: 0; padding-left: var(--nav-sidebar-width); } - body.page-fullscreen #page-content { - overflow: visible; - } } /* ------------------------------------------------------------ @@ -174,19 +160,23 @@ body.page-fullscreen #page-content { 3. BOTTOM NAVIGATION (Mobile) ------------------------------------------------------------ */ #bottom-nav { - /* Flex-Kind von #app{height:100dvh} — kein position:fixed nötig. - 100dvh auf iOS inkludiert Safe Areas → Nav endet am physischen Rand. */ - flex-shrink: 0; - z-index: 700; - min-height: calc(var(--nav-bottom-height) + var(--safe-bottom)); + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 700; + transform: translateZ(0); + -webkit-transform: translateZ(0); + will-change: transform; + min-height: calc(var(--nav-bottom-height) + var(--safe-bottom)); padding-top: var(--space-1); padding-bottom: calc(var(--safe-bottom) + var(--space-1)); - background: var(--c-surface); - border-top: 1px solid var(--c-border-light); - display: flex; - align-items: stretch; - box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08); - transition: border-top-color 0.4s ease; + background: var(--c-surface); + border-top: 1px solid var(--c-border-light); + display: flex; + align-items: stretch; + box-shadow: 0 -2px 12px rgba(42, 31, 20, 0.08); + transition: border-top-color 0.4s ease; } @keyframes nav-alert-pulse { diff --git a/backend/static/index.html b/backend/static/index.html index 16a5b81..688dd83 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -434,7 +434,7 @@ - +