From 9133ecdcd44c0d10f2b7d984bd54dc4c9321a57d Mon Sep 17 00:00:00 2001 From: Tudor Sitaru Date: Tue, 19 May 2026 09:47:13 +0100 Subject: [PATCH] =?UTF-8?q?feat(mobile):=20iOS=20polish=20=E2=80=94=20them?= =?UTF-8?q?e-color,=20safe-area,=20dvh,=20tap-highlight?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- nextjs-app/app/globals.css | 21 +++++++++++++++++++-- nextjs-app/app/layout.tsx | 19 ++++++++++++++++++- nextjs-app/components/HomeView.module.css | 4 ++-- nextjs-app/components/Navigation.module.css | 8 ++++++-- nextjs-app/components/SchoolMap.module.css | 1 + nextjs-app/public/manifest.json | 6 +++--- 6 files changed, 49 insertions(+), 10 deletions(-) diff --git a/nextjs-app/app/globals.css b/nextjs-app/app/globals.css index 2c25287..2bbcc74 100644 --- a/nextjs-app/app/globals.css +++ b/nextjs-app/app/globals.css @@ -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 { diff --git a/nextjs-app/app/layout.tsx b/nextjs-app/app/layout.tsx index f43e8d3..24dc18d 100644 --- a/nextjs-app/app/layout.tsx +++ b/nextjs-app/app/layout.tsx @@ -1,4 +1,4 @@ -import type { Metadata } from 'next'; +import type { Metadata, Viewport } from 'next'; import { DM_Sans, Playfair_Display } from 'next/font/google'; import Script from 'next/script'; import { Navigation } from '@/components/Navigation'; @@ -21,7 +21,24 @@ const playfairDisplay = Playfair_Display({ display: 'swap', }); +export const viewport: Viewport = { + width: 'device-width', + initialScale: 1, + // viewport-fit=cover lets us paint behind the notch / Dynamic Island so + // env(safe-area-inset-*) values resolve to real numbers on iPhone. + viewportFit: 'cover', + themeColor: [ + { media: '(prefers-color-scheme: light)', color: '#faf7f2' }, + { media: '(prefers-color-scheme: dark)', color: '#1a1612' }, + ], +}; + export const metadata: Metadata = { + appleWebApp: { + capable: true, + title: 'SchoolCompare', + statusBarStyle: 'default', + }, title: { default: 'SchoolCompare | Compare School Performance', template: '%s | SchoolCompare', diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css index cb10582..b0b735e 100644 --- a/nextjs-app/components/HomeView.module.css +++ b/nextjs-app/components/HomeView.module.css @@ -142,7 +142,7 @@ display: grid; grid-template-columns: 1fr 340px; gap: 1rem; - height: calc(100vh - 280px); + height: calc(100dvh - 280px); min-height: 520px; max-height: 800px; } @@ -467,7 +467,7 @@ .mapViewContainer { grid-template-columns: 1fr; grid-template-rows: 1fr; - height: calc(100vh - 280px); + height: calc(100dvh - 280px); min-height: 400px; } diff --git a/nextjs-app/components/Navigation.module.css b/nextjs-app/components/Navigation.module.css index 306091f..2f7b2a9 100644 --- a/nextjs-app/components/Navigation.module.css +++ b/nextjs-app/components/Navigation.module.css @@ -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 diff --git a/nextjs-app/components/SchoolMap.module.css b/nextjs-app/components/SchoolMap.module.css index 4c65387..98a004c 100644 --- a/nextjs-app/components/SchoolMap.module.css +++ b/nextjs-app/components/SchoolMap.module.css @@ -7,6 +7,7 @@ .mapWrapper.fullscreen { width: 100vw; height: 100vh; + height: 100dvh; } .fullscreenBtn { diff --git a/nextjs-app/public/manifest.json b/nextjs-app/public/manifest.json index 11acdfc..740ecbf 100644 --- a/nextjs-app/public/manifest.json +++ b/nextjs-app/public/manifest.json @@ -1,11 +1,11 @@ { "name": "SchoolCompare", "short_name": "SchoolCompare", - "description": "Compare primary school KS2 performance across England", + "description": "Compare primary and secondary school performance across England", "start_url": "/", "display": "standalone", - "background_color": "#ffffff", - "theme_color": "#3b82f6", + "background_color": "#faf7f2", + "theme_color": "#faf7f2", "icons": [ { "src": "/favicon.svg",