Make every page work from 320px phones to 3840px screens

CHANGELOG.md

@@ -16,6 +16,35 @@ broken-source changes, and taxonomy changes (METHODOLOGY §10, §12).
 - The creator's ORCID iD (0009-0009-4672-4956) is in `.zenodo.json`, `CITATION.cff` and
   the atlas JSON-LD, so DataCite can link future Zenodo versions to ORCID.
 
+### Atlas
+- **Every screen size**, checked on a 13-viewport matrix (320×568 phone to
+  3840×2160) plus landscape phones, 200 % / 400 % zoom and Arabic:
+  - Desktop (≥ 980 px): the atlas is now exactly one screen tall and the
+    side panels scroll inside it. Before, the 221-entry index stretched the
+    page — and the map — to about 18,700 px, so the map's centre and the
+    selected pin were far below the fold.
+  - Side panels size with the viewport (18–24 rem filters, 18–30 rem
+    record), so the map gets 448 px instead of 320 px at 1024 wide and
+    panels grow on wide screens; from 1800 px wide the whole UI scales up
+    gently (≈ 19 px text at 2560, 24 px at 3840).
+  - Landscape phones and short windows: compact header, one-line footer,
+    and the record opens as a side sheet (inline-end, mirrored in Arabic)
+    instead of a bottom sheet covering the map. Tablet portrait sheet is
+    62 % tall instead of 80 %. On phones and tablets the map centres a
+    selected pin in the part the sheet leaves visible.
+  - Mobile: Leaflet's zoom buttons no longer paint over the open filters
+    drawer; header nav (reading pages) and atlas footer are single
+    swipeable rows; `dvh` units so browser chrome doesn't hide content;
+    safe-area insets for notched phones (`viewport-fit=cover`).
+  - Touch screens: buttons, selects, map zoom, popup close, footer and
+    header links are ≥ 44 px; pins get a 44 px hit area; form fields are
+    16 px so iOS doesn't zoom on focus.
+  - Reading pages: header and footer align to a centred 90 rem frame on
+    ultra-wide screens.
+  - The map re-measures itself when its box changes size
+    (`ResizeObserver` → `invalidateSize`), e.g. on rotation.
+  - `tests/browser/audit.mjs` gains 9 viewport checks (69 in all).
+
 ### Tooling
 - `.github/workflows/release.yml` creates a GitHub release `v<version>`
   whenever the dataset version changes on `main` (or on demand), with

about.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 <title>About Mapping Voices — research question, method, data, ethics</title>
 <meta name="description" content="Mapping Voices is an open digital-humanities research infrastructure that makes dispersed oral-history and voice-testimony collections discoverable through structured metadata, interactive mapping, and an openly licensed dataset." />
 <link rel="canonical" href="https://adab-tech.github.io/mapping/about.html" />

css/about.css

@@ -52,19 +52,72 @@
 @media (max-width: 760px) {
   .page .header-inner {
     flex-wrap: wrap;
+    row-gap: 0.4rem;
   }
 
+  /* One swipeable row instead of three wrapped rows of links; the
+     "Open the atlas" button leads so it is always visible. */
   .page-nav {
-    margin-inline-start: 0;
+    margin-inline: calc(-1 * var(--gutter));
+    padding-inline: var(--gutter);
+    padding-block: 0.15rem;
     justify-content: flex-start;
-    width: 100%;
+    width: calc(100% + 2 * var(--gutter));
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
+    mask-image: linear-gradient(to right, #000 85%, transparent);
+  }
+
+  html[dir="rtl"] .page-nav {
+    -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
+    mask-image: linear-gradient(to left, #000 85%, transparent);
+  }
+
+  .page-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .page-nav a {
+    white-space: nowrap;
+  }
+
+  .page-nav a:last-child {
+    margin-inline-end: 2rem;
+  }
+
+  .page-nav .page-nav-cta {
+    order: -1;
+    margin-inline-end: 0.25rem;
+  }
+}
+
+/* Wide screens: keep header and footer aligned with a centred frame rather
+   than pinned to the far edges of a 2560/3840px window. */
+.page .header-inner {
+  max-width: 90rem;
+}
+
+/* Touch screens: header links and the Explorer's atlas links become
+   44px-tall targets. */
+@media (pointer: coarse) {
+  .page-nav a,
+  .lx-atlas-link {
+    display: inline-flex;
+    align-items: center;
+    min-height: var(--tap);
+  }
+
+  .page-nav {
+    row-gap: 0;
   }
 }
 
 .page-main {
   max-width: 44rem;
   margin: 0 auto;
-  padding: 2.5rem 1rem 3rem;
+  padding: clamp(1.5rem, 4vw, 2.5rem) max(1rem, env(safe-area-inset-right, 0px)) 3rem max(1rem, env(safe-area-inset-left, 0px));
   font-size: 1.02rem;
   line-height: 1.65;
 }
@@ -253,7 +306,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.25rem;
-  padding: 1rem;
+  padding: 1rem max(var(--pad-right), calc((100% - 90rem) / 2 + var(--gutter))) max(1rem, env(safe-area-inset-bottom, 0px)) max(var(--pad-left), calc((100% - 90rem) / 2 + var(--gutter)));
 }
 
 .page-footer p {