[wized2]

Summary

Addresses #4 — mobile responsiveness for the narrowest screens only.

Scope (as requested): a single append-only change to css/styles.css.

What it does

@media (max-width: 480px) at the end of the stylesheet:

Overflow guards

• img, svg, video, canvas, table → max-width: 100%
• .cw-body, .qcode, .table-scroll, .raw-db → max-width: 100%
• body { overflow-x: hidden } safety net

44px touch targets

• min-height: 44px on primary interactive controls (.btn, .mini-btn, nav/auth/handbook controls, etc.)
• .tutor-gear and .ck-box at least 44×44

Layout

• .why / .stat-grid single column; chips wrap

Out of scope

PWA, CI, cloud/Supabase, README, and other files were removed from this PR so it is independently reviewable.

Test plan

• Open the app at ~375px width
• No horizontal scroll on main flows
• Primary buttons/controls meet ~44px height

[gitswagata1]

Dependency update looks good. Merging.

[gitswagata1]

Thanks for the work here — the mobile CSS additions look solid. However, the PR scope doesn't match the title:

Title says: "add <=480px responsive block for overflow guards and 44px touch targets"
PR actually contains: 27 changed files, 3256 additions — including PWA support, CI workflow, CONTRIBUTING.md, SETUP-CLOUD.md, a patent disclosure, Supabase schema, new JS modules (adaptive.js, cloud.js, config.js), a full README rewrite, and 3 test suites.

This makes it very hard to review. Please:

1. Split this into separate PRs by concern:

   • PR 1: The mobile CSS fix (what the title describes)
   • PR 2: PWA support (manifest, service worker, icons)
   • PR 3: CI + repo scaffolding (workflows, CONTRIBUTING, issue templates)
   • PR 4: Cloud/Supabase features (cloud.js, config.js, schema, SETUP-CLOUD.md)
   • PR 5: README rewrite + docs

2. Each PR should be independently reviewable and mergeable. Smaller PRs = faster reviews, cleaner git history, easier rollbacks.

I want to merge the CSS fix — just need it isolated. Thanks!

[wized2]

Thanks for the clear review — agreed the previous scope was too broad.

This branch is now CSS-only: a single append of the @media (max-width: 480px) block to css/styles.css (16 lines). PWA, CI, cloud, docs, and other files were removed from this PR.

Ready for another look when you have a moment.

[wized2]

Reminder: this PR is now CSS-only (css/styles.css, +16 lines). Happy to address anything else if needed.

[wized2]

Thanks for the review — agreed the PR grew far past the title.

Plan:

1. Keep this PR focused on the mobile CSS only (<=480px overflow guards + 44px touch targets), matching the title.
2. Move PWA / CI / docs / schema / other modules to separate follow-up PRs (or drop them from this branch if you prefer).

I’ll push a narrowed branch next so review is only the responsive CSS delta.

[wized2]

Reworked this PR to match the title only.

• Branch reset onto current main
• Single file change: css/styles.css — @media (max-width: 480px) overflow guards + 44px touch targets
• Removed the unrelated docs/CI/PWA/schema bulk from the PR diff

Ready for re-review.