fix(landing,docs): comprehensive mobile responsive pass

[johnnichev]

Summary

Fixes the catastrophic mobile layout reported on Galaxy S23. The landing page was effectively unusable below ~1024px due to a combination of bugs that all surfaced together. Plus the docs site had a broken nav icon that triggered a half-rendered state when clicked.

Issues addressed (from the bug report):

#	Issue	Fix
1	Docs nav book icon breaks the page when clicked	extra.homepage → QUICKSTART, removed broken mike provider
2	Builder iframe unusable on mobile	Mobile fallback CTA card replaces iframe at <=768px
3	Footer too cluttered on mobile	Stacks vertically, smaller text, more breathing room
4	pip-install button squeezed to "l sele"	Hero buttons stack vertically at <=640px
5	Guardrails code block overflowing viewport width	min-width: 0 on grid children + .code-frame
6	Eval/trace previews scrolling sideways	Inner HTML responsive @media queries + .table-wrap
7	Comparison tables broken/cut off	.cmp-scroll wrapper with edge-gradient mask + scroll hint
—	Whole page horizontal overflow	html, body { overflow-x: hidden } (was body alone)
—	Header nav not collapsing	Bumped breakpoint 900px → 1024px + hamburger menu

Root cause (the hidden gotcha)

The Galaxy S23 was almost certainly in Chrome's "Desktop Site" mode, which reports a viewport of ~980px — just over the existing 900px breakpoint. This defeated .hide-mobile and kept all layouts in their desktop forms but rendered on a phone screen, producing the squeezed/overflowing/cut-off symptoms.

The fix is structural, not just CSS patches:

1. Bumped the narrow-mode breakpoint to 1024px to catch Desktop Site mode and any other phones reporting >900px
2. Added a hamburger menu so the collapsed nav is still functional
3. Fixed all the underlying overflow patterns that caused horizontal page scroll regardless of breakpoint

Detailed changes

landing/index.html (+395 / -16)

Page-level overflow fix

• html, body { overflow-x: hidden; max-width: 100% } (previously only body)
• Defensive max-width: 100% on img, video, iframe, table, pre

Hamburger menu

• New .nav-burger button + .nav-drawer slide-down panel
• aria-expanded / aria-hidden / aria-controls for accessibility
• Click outside, Escape key, and resize-to-desktop all close the drawer
• Body scroll lock while drawer is open
• Animated burger → X transform on toggle

Hero buttons

• .hero-actions { flex-direction: column } at <=640px
• Override inline flex: 1 with !important so each button gets full width

Code blocks

• .code-frame { min-width: 0; max-width: 100% }
• .grid-2/3/4 > * { min-width: 0 } (the actual flex/grid sizing trap fix)
• .code-body { -webkit-overflow-scrolling: touch } for iOS momentum
• Smaller font/padding at <=640px

Comparison tables

• New .cmp-scroll wrapper with mask-image edge gradient
• .cmp-table { min-width: 640px } forces readable column widths
• .cmp-hint ("scroll → for full comparison") shown at <=768px
• Both comparison tables migrated to the new wrapper

Builder section

• New .builder-mobile-fallback card with cyan CTA button
• .builder-frame[data-builder-iframe] { display: none } at <=768px
• Iframe replaced with: "The visual builder needs more room. Open it in a new tab to try it on a desktop."

Eval/trace iframes

• Iframe height responsive: 380px → 320px at <=768px
• (Inner HTML files updated separately — see below)

Footer

• Stacks vertically at <=640px with centered alignment
• New .footer-attribution wrapper with smaller .footer-meta text
• Reduced font size and tighter gap on mobile

Touch-device hover guard (the touch-stickiness follow-up from earlier)

• Single @media (hover: none) block at the bottom of the CSS
• Resets transform and box-shadow side of hover (not color) on touch
• Cleaner than wrapping 40+ individual hover rules

landing/eval-report-preview.html (+22 / -1)

• html, body { overflow-x: hidden; max-width: 100% }
• New @media (max-width: 560px) block: smaller padding, simplified 2-col stat grid, smaller table padding
• .table-wrap with horizontal scroll inside the iframe
• All scrolling happens inside the iframe instead of forcing the parent page wider

landing/trace-preview.html (+15 / -1)

• Same html, body { overflow-x: hidden } fix
• New .table-wrap with min-width: 380px table inside
• @media (max-width: 560px) block: smaller padding, font, table padding
• Stats inline → block on mobile

mkdocs.yml (+5 / -2)

• Removed extra.version.provider: mike — was fetching versions.json (which doesn't exist), causing 404s and breaking the docs nav state
• Added extra.homepage: https://selectools.dev/QUICKSTART/ — the actual root cause of the broken docs nav icon. Clicking the logo navigated to /, which is the landing page (overwritten by the deploy workflow). Material's instant-navigation could not render the landing page HTML inside the docs shell, causing the half-rendered broken state. Now the icon goes to QUICKSTART, which is a real Material docs page.

docs/index.md (+99 / -3)

• Replaced the JS-redirect hack (window.location.replace("QUICKSTART/")) with a proper Material grid-cards welcome page
• Two <div class="grid cards"> sections: "Get started in 5 minutes" (4 cards) and "Explore the modules" (6 cards)
• Visual builder CTA with md-button styling
• The redirect approach broke under navigation.instant. The welcome page is what local mkdocs serve shows now. Production still overwrites it with the landing page, but the extra.homepage config above ensures that's never reached from the docs nav.

Local-only follow-ups (in .private/, gitignored, not in this PR)

Done as part of the same work session but not committed because .private/ is gitignored:

• 44 URL replacements across 14 launch/blog files in .private/ — same johnnichev.github.io/selectools → selectools.dev sweep we did for public files in PR feat: animation/delight pass + selectools.dev custom domain #40, now extended to launch posts and blog drafts
• .private/launch-prep/gsc-migration-checklist.md — new file with the full Google Search Console migration playbook (add new property, TXT verification, sitemap submission, change-of-address wizard, monitoring schedule, what NOT to do)

Test plan

Pre-merge — verify the build is clean (already done locally):

• mkdocs build produces 0 errors / 0 warnings
• HTML structural balance checked (style/script/nav/table/footer all balanced)
• JS syntax validated with node --check (passes)
• Both preview HTML files structural balance checked
• All 14 pre-commit hooks pass

Post-merge — verify on production at https://selectools.dev

Required device combos:

• Galaxy S23, Chrome, normal mobile mode
• Galaxy S23, Chrome, "Desktop Site" mode ← this was the hidden gotcha
• iPhone, Safari, mobile mode (test the iOS-specific fixes)
• Desktop, Chrome (regression check)

For each combo, walk through:

• Hamburger button visible (or hidden on desktop)
• Hamburger opens/closes the drawer
• Pressing Esc inside the drawer closes it
• Tapping any drawer link navigates and closes the drawer
• No horizontal page scroll on any section
• Hero buttons are full-width and tappable (pip-install no longer squeezed)
• Stats count-up still fires when scrolled into view
• Code blocks scroll inside their own boxes (not the page)
• Comparison tables show edge-gradient hint on the right side
• Comparison tables scroll horizontally inside their wrappers
• "scroll → for full comparison" hint appears on mobile
• Builder section shows the "Open builder →" CTA card (not the desktop iframe) at narrow widths
• Eval/trace previews fit within their iframes without forcing the page wider
• Footer stacks vertically with centered alignment and breathing room
• Tap states don't "stick" (touch hover guard working)

For the docs site:

• Visit https://selectools.dev/QUICKSTART/
• Click the "Selectools" book icon at the top of the docs nav
• Verify it goes to the QUICKSTART page (not a broken state)
• No 404s for versions.json in DevTools Network tab

What's NOT in this PR

• Visual redesign / restructuring of the landing page (this is a layout fix, not a redesign)
• Touching the simulation player, hero flow SVG, or existing animations (intentionally untouched)
• Replacing the eval/trace iframes with native HTML (would be a larger refactor — the responsive @media queries on the inner files achieve the same UX with less risk)
• Server-side redirects from / to /QUICKSTART/ for docs (would require an Actions workflow change; the extra.homepage config solves the same problem more cleanly)

If anything still looks off after merge, the easiest fix-loop is to add to this same branch and re-merge — I can iterate quickly on any specific symptoms you find.