fix(mobile): mobile pass: 44px tap targets, BETA badge on phones, dvh/safe-area, 16px inputs (A98) - #69
Merged
Conversation
…6px inputs (A98) Emulated mobile audit (Edge; 390x844, 360x800, 768x1024; touch; both themes and languages). No horizontal overflow before or after; undersized controls fixed with phone-only min-h-11 (reset at sm/md so desktop is unchanged). The corner BETA ribbon is md+ only; phones get a header badge. Explorer files untouched (follow-ups in PR).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A real mobile audit and fix pass (A98). Headless Edge with device emulation (
isMobile,hasTouch), 390x844 @3x, 360x800 @3x, 768x1024 @2x, dark + light, EN + DA, 16 pages + 10 interactions (search dropdown, header / theme / language menus, About modal, tour welcome + steps, timeline term panel, study quiz). Each page checked forscrollWidth > innerWidth, text < 14px, tap targets < 44x44, inputs < 16px, and fixed/sticky overlap.Result: no horizontal overflow before or after (all 96 page/device/lang combos). The real problems were undersized controls, the BETA ribbon over content, iOS input zoom, and a compare bar that pinned ~140px of a phone screen. Fixes apply to phones only (
min-h-11etc., reset atsm/md), so the desktop layout is unchanged (t768 counts are identical before/after).Explorer files (
Explorer.tsx,explorer-*.ts,GraphLegend.tsx, explorer page) were not touched. Their findings are listed as follow-ups below.Tap targets < 44px (360x800, EN)
What's left is mostly short words that are 44px tall but narrower than 44px ("AI", "Data"), spaced by gaps; inline links in running text; and the timeline rows (see below).
Checklist
md+ only; phones get an amber BETA badge by the logomdmax-h-[calc(100dvh-4rem)]+ scroll, shadowmd[data-site-footer]rule, see note)env(safe-area-inset-*)min-h-screen(100vh) bodymin-h-dvh,viewport-fit=covermax-h-[70dvh]scrollspointer: coarsesmonly; sectionscroll-mtadjustedinline-block py-2.5)[&_pre]:overflow-x-auto(none overflow today)60vh; close x ~20px; buttons 34px; pill under the ribbon60dvh, 44px close/buttons, safe-area pilltext-smin single-domain view. Follow-up: 44px rows would triple the chart height; the list view is the full-size alternative<summary>20pxtitletooltip (hover only)Graph.tsxuses the sharedattachHover; left alonesm/md)pointer-coarse:variants instead of breakpoint resetsExplorer follow-ups (not touched, other agents own these files)
<summary>58x15, 11px; legend body 12px throughoutGraphLegend.tsx)GraphLegend) 11-12px, summary 15px tallmd, so the Explorer map corner is clearNotes
[&>*]:inline-flexon the footer also matched the<script>Astro hoists next to the About island, rendering its source and widening the layout viewport to 804px. Replaced by a[data-site-footer] > :is(a, button)rule inglobal.css; the audit now also assertsinnerWidth == device width(0 violations after).scratchpad/mob/{before,after}/,after/table.tsv.Test plan
mise run fix && mise run gategreen (lint, typecheck, vitest + build, audit)astro preview): 0 overflow, 0 inputs < 16px