feat(mobile): iOS polish — theme-color, safe-area, dvh, tap-highlight
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 52s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

MOB-19: Add a viewport Viewport export with viewportFit: 'cover' and
themeColor entries for light (#faf7f2) / dark (#1a1612), plus the
appleWebApp metadata for the home-screen status bar style and title.
Manifest's stale #3b82f6 theme_color updated to match brand cream.

MOB-20: Apply env(safe-area-inset-*) to the sticky chrome — the top
header gets max(padding, inset-left/right) so the logo and tab links
clear the notch in landscape; the bottom tab bar already had
inset-bottom and now also gets inset-left/right.

MOB-21: Replace 100vh with 100dvh in body min-height, modal max-heights,
the map view container, and the fullscreen map. Older engines fall
back via the duplicated vh declaration.

MOB-22: Set -webkit-tap-highlight-color: transparent on body to
suppress the iOS Safari grey flash; add a generic touch-pointer
:active rule (opacity 0.7) so taps still register visually on plain
anchors and bare buttons. Components with their own :active styling
are unaffected.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-05-19 09:47:13 +01:00
parent 56ab1368b1
commit 9133ecdcd4
6 changed files with 49 additions and 10 deletions
+6 -2
View File
@@ -10,7 +10,9 @@
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
/* Add the safe-area inset to horizontal padding so the header content
clears the notch in landscape on iPhones. */
padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
display: flex;
justify-content: space-between;
align-items: center;
@@ -231,8 +233,10 @@
background: var(--bg-card, white);
border-top: 1px solid var(--border-color, #e5dfd5);
box-shadow: 0 -2px 12px rgba(26, 22, 18, 0.06);
/* Respect iPhone home-indicator inset */
/* Respect iPhone home-indicator (bottom) and notch (left/right in
landscape) insets so the tab content never sits under system UI. */
padding-bottom: env(safe-area-inset-bottom, 0);
padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
/* Compensate for iOS Chrome's auto-hiding URL bar — Navigation.tsx
writes the offset based on the Visual Viewport API. translate3d
(instead of translateY) forces hardware compositing so the bar