Review: Mobile CSS polish for iOS WKWebView

Verdict: NEEDS_REFINEMENT

Template Completeness

• [x] Type — Feature
• [x] Lineage — Related to ldraney/palinks #56
• [x] Repo — ldraney/palinks
• [x] User Story — present and well-formed
• [x] Context — adequate background on WKWebView wrapping
• [x] File Targets — 2 files to modify, 2 exclusion zones
• [x] Feature Flag — none (appropriate for CSS-only work)
• [x] Acceptance Criteria — 6 items
• [x] Test Expectations — manual visual testing acknowledged
• [x] Constraints — ror-css-guide, CSS-only, Safari+WKWebView
• [x] Checklist — present
• [x] Related — present

Traceability

• [x] story:ios-distribution label — Turbo Native iOS shell + Fastlane pipeline
• [x] story note verified — found in project-palinks user-stories section
• [x] arch:palinks label — main application architecture
• [ ] arch note MISSING — [SCOPE] Create architecture note arch-palinks for the palinks application component
• [x] Forgejo issue — ldraney/palinks#60, open

File Targets

• [x] app/assets/stylesheets/application.css — verified: 493 lines, contains design tokens, responsive breakpoint at line 488, existing touch-action on drag handle at line 181. No safe-area or viewport-fit CSS currently present — confirms work is needed.
• [x] app/views/layouts/application.html.erb — verified: 42 lines, viewport meta tag at line 5 reads width=device-width,initial-scale=1. Missing viewport-fit=cover — confirms AC #1 is actionable.

Repo Placement

Dependencies

• Item #1530 (issue #56, 8pt) — parent iOS distribution ticket, currently in validation column. This ticket's lineage references it. CSS polish can proceed independently; no blocker.
• Sibling ios-distribution items (#1808/#57, #1809/#59, #1811/#61) — all in backlog. No ordering dependency documented or detected.
• No items currently in in_progress that would conflict.

Acceptance Criteria

• AC 1 (viewport-fit=cover) — code-verifiable via grep. Currently missing from meta tag, confirms work needed.
• AC 2 (env(safe-area-inset-*)) — code-verifiable via grep. Currently absent from CSS, confirms work needed.
• AC 3 (44x44pt touch targets) — partially code-verifiable (min-height/min-width checks), visual confirmation needed. Nav tabs currently have padding var(--spacing-xs) var(--spacing-sm) (4px 8px) which is well under 44pt — confirms work needed.
• AC 4 (no horizontal scroll) — visual testing required. Current container uses max-width: 48rem with padding, should be fine but needs verification.
• AC 5 (375px rendering) — visual testing required. Current grid is 1-column below 600px, reasonable baseline.
• AC 6 (filter tabs on mobile) — visual testing required. Navbar uses flex with 5 items (Links, Popular, Favorites, Other, + Add) — likely to overflow on narrow screens. Issue should consider whether wrapping or horizontal scroll is the expected solution.

Blast Radius

• application.css is the single stylesheet for all views. Changes affect 8 templates: layout, flash partial, index, show, _link partial, _form partial, new, edit.
• Form templates (_form.html.erb, new.html.erb, edit.html.erb) are not in file targets but use shared button and form classes. Current form inputs are full-width, likely fine on mobile already.
• No sibling services — palinks is the only Rails app; no blast radius beyond this repo.
• PWA manifest (pwa/manifest.json.erb) exists but is not affected by CSS changes.

Decomposition Assessment

Recommendation

• [SCOPE] Create architecture note arch-palinks for the palinks application component. This note is referenced by the arch:palinks label on this and 20+ other board items but does not exist in pal-e-docs.