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
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:
@@ -92,7 +92,24 @@ body {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
/* dvh (dynamic viewport) accounts for iOS Safari's collapsing toolbar;
|
||||
fall back to vh on older engines that don't recognise dvh. */
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
/* Suppress the iOS Safari grey tap flash — explicit :active states
|
||||
below carry the press feedback instead. */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* Provide a baseline press feedback for the most common interactive
|
||||
elements — replaces the suppressed default tap highlight. Buttons and
|
||||
.btn-* classes carry their own :active styles already; this handles
|
||||
plain anchors used as inline links and bare button elements. */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
a:active,
|
||||
button:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reserve space for the fixed mobile bottom tab bar (56px + safe-area inset). */
|
||||
@@ -1766,7 +1783,7 @@ body {
|
||||
|
||||
.modal-content {
|
||||
margin: 1rem;
|
||||
max-height: calc(100vh - 2rem);
|
||||
max-height: calc(100dvh - 2rem);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
@@ -1836,7 +1853,7 @@ body {
|
||||
@media (max-width: 480px) {
|
||||
.modal-content {
|
||||
margin: 0.5rem;
|
||||
max-height: calc(100vh - 1rem);
|
||||
max-height: calc(100dvh - 1rem);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
||||
Reference in New Issue
Block a user