chore: release v0.23.12

This commit is contained in:
Ulas Kalayci
2026-04-22 12:39:00 +02:00
parent 420391286c
commit 00afd37c90
6 changed files with 35 additions and 32 deletions
+5
View File
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased] ## [Unreleased]
## [0.23.12] - 2026-04-22
### Fixed
- iOS PWA: bottom navigation bar gap resolved by removing `overflow: hidden` from `<html>` (iOS Safari bug: this property clips `position: fixed` descendants) and restoring the `body::after` fill approach; nav bar height is no longer inflated by the safe area padding
## [0.23.11] - 2026-04-22 ## [0.23.11] - 2026-04-22
### Fixed ### Fixed
+2 -2
View File
@@ -1,12 +1,12 @@
{ {
"name": "oikos", "name": "oikos",
"version": "0.23.11", "version": "0.23.12",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "oikos", "name": "oikos",
"version": "0.23.11", "version": "0.23.12",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"bcrypt": "^6.0.0", "bcrypt": "^6.0.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "oikos", "name": "oikos",
"version": "0.23.11", "version": "0.23.12",
"description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.", "description": "Self-hosted family planner - calendar, tasks, shopping, meal planning, budget and more. Private, open-source, no subscription.",
"main": "server/index.js", "main": "server/index.js",
"type": "module", "type": "module",
-4
View File
@@ -144,10 +144,6 @@
z-index: var(--z-nav); z-index: var(--z-nav);
backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
/* Füllt den iOS Home-Indicator-Bereich mit dem Nav-Hintergrund.
* Das padding erstreckt den Hintergrund der Nav bis zum physischen Bildschirmrand,
* ohne das Flex-Layout der App-Shell zu beeinflussen (nav-bottom hat kein flex-grow). */
padding-bottom: env(safe-area-inset-bottom, 0px);
} }
/* ── Items-Reihe ── */ /* ── Items-Reihe ── */
+27 -23
View File
@@ -5,10 +5,15 @@
*/ */
/* ── Kein Rubber-Banding, kein Body-Scroll ── /* ── Kein Rubber-Banding, kein Body-Scroll ──
* overflow: hidden verhindert, dass body scrollbar wird, falls ein * overflow: hidden NUR auf body - NICHT auf html setzen.
* Element minimal überläuft. overscroll-behavior: none deaktiviert * iOS Safari Bug: overflow:hidden auf <html> clippt position:fixed-Elemente,
* Pull-to-Refresh und Rubber-Banding. */ * was body::after (Safe-Area-Fill) unsichtbar macht.
html, body { * overscroll-behavior: none auf html+body deaktiviert Pull-to-Refresh/Rubber-Banding. */
html {
overscroll-behavior: none;
}
body {
overflow: hidden; overflow: hidden;
overscroll-behavior: none; overscroll-behavior: none;
} }
@@ -21,8 +26,7 @@ html, body {
/* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ── /* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ──
* Nur horizontale Safe Areas auf body. Vertikale Safe Areas werden über * Nur horizontale Safe Areas auf body. Vertikale Safe Areas werden über
* .app-shell (padding-top im Standalone-Modus) und die Seiten-/Nav-Berechnungen * .app-shell (padding-top im Standalone-Modus) und body::after (unten) gehandhabt.
* (padding-bottom via --safe-area-inset-bottom) gehandhabt.
* KEIN body padding-top/bottom - das würde .app-shell (height: 100dvh) * KEIN body padding-top/bottom - das würde .app-shell (height: 100dvh)
* um den Safe-Area-Betrag aus dem Viewport schieben und Scroll-Bleed erzeugen. */ * um den Safe-Area-Betrag aus dem Viewport schieben und Scroll-Bleed erzeugen. */
body { body {
@@ -30,13 +34,6 @@ body {
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
} }
/* ── Bottom Nav über der Gesture Bar ──
* layout.css nutzt --safe-area-inset-bottom Token;
* hier als Fallback direkt via env() */
/*.nav-bottom {
padding-bottom: env(safe-area-inset-bottom);
}*/
/* Touch-Targets werden über tokens.css (--target-sm/md/lg) und /* Touch-Targets werden über tokens.css (--target-sm/md/lg) und
* komponentenspezifische Styles gehandhabt - siehe Redesign Phase E. * komponentenspezifische Styles gehandhabt - siehe Redesign Phase E.
* Keine globale min-size-Regel hier, da sie mit dem bestehenden * Keine globale min-size-Regel hier, da sie mit dem bestehenden
@@ -77,14 +74,21 @@ nav,
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
} }
/* iOS PWA: Schwarzen Streifen unter der Nav verhindern. /* iOS PWA: Home-Indicator-Bereich unter der Nav füllen.
* iOS reserviert den Home-Indicator-Bereich unterhalb des CSS-Viewports. * position:fixed ist erforderlich, damit body::after auch dann sichtbar ist,
* body::after füllt diesen Bereich mit dem gleichen Glass-Hintergrund wie die Nav. * wenn der App-Shell-Inhalt den Home-Indicator-Bereich nicht erreicht.
* z-index: z-nav - 1 (unter der Nav) - dadurch rendert die Nav immer oben. * Funktioniert nur wenn html KEIN overflow:hidden hat (iOS Safari Bug:
* Im Überlappungsbereich (Nav-Padding = Safe-Area) liegt die Nav darüber; * overflow:hidden auf <html> clippt position:fixed-Elemente). */
* in einem eventuellen Spalt zwischen Nav-Unterkante und Displayrand liegt body::after {
* body::after sichtbar - optisch identisch mit der Nav. */ content: '';
/* body::after-Ansatz entfernt: layout.css setzt padding-bottom auf .nav-bottom position: fixed;
* direkt via env(safe-area-inset-bottom), was zuverlässiger ist als ein bottom: 0;
* Fixed-Pseudo-Element (kann bei overflow:hidden auf html/body geclipt werden). */ left: 0;
right: 0;
height: env(safe-area-inset-bottom, 0px);
background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
z-index: calc(var(--z-nav) - 1);
}
} }
-2
View File
@@ -21,9 +21,7 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
/* iOS PWA: verhindert Body-Scroll, der position:fixed-Elemente verschiebt */
height: 100%; height: 100%;
overflow: hidden;
} }
body { body {