fix: address follow-ups

[v7ncentng]

Summary

• Addresses Mark's follow-ups on the landing/welcome/upload-route layout unification: mobile card wrapping, a .welcome-back overlap on short viewports, a hover-vs-click-target mismatch, subtitle height parity, an a11y gap, and hero icon loading priority.

Motivation

The unification PR was merged with several non-blocking review comments deferred to a follow-up. This PR closes those out so the flow is fully consistent and doesn't regress on mobile or short viewports.

Changes

• Restored flex-wrap on .landing-cards/.welcome-cards and added a 520px breakpoint (matching upload-route) so the two-card row stacks instead of overflowing on narrow viewports.
• Added a 640px max-height breakpoint that drops .welcome-back out of position: absolute into normal flow, preventing it from overlapping card content on short viewports.
• Moved hover feedback from the whole card to the CTA button only, since the card itself is no longer the click target.
• Gave .landing-subtitle the same min-height: 46px treatment as .welcome-subtitle for consistent card height across copy lengths.
• Marked the decorative checkmark SVG in the upload-route file-row as aria-hidden.
• Added priority to the four landing/welcome hero icons, which are plausible LCP elements.

Related issues / PRs

• Follow-up to the landing/welcome/upload-route unification PR. (PR feat(ui): unify landing, welcome, and upload-route card layouts with il… #222 )

Validation

Commands run to validate this change (all from app/ui):

• npm run lint
• npm run format:check
• npm run typecheck
• npm run test
• npm run build

Observed:

• lint, format:check, and typecheck completed with zero errors.
• test: 131 passed across 25 files, unchanged pass count from baseline.
• build: production build compiled and prerendered all 16 routes successfully.

Not performed this session: a live browser check of the two viewport breakpoints (Chrome extension was not connected). The responsive/overlap fixes are verified by code inspection and the automated suite above only. Recommend a manual pass — resize to under 520px width and under 640px height on / and /welcome — before merging, and attach before/after screenshots.

Not applicable: no backend, mobile, or docker-compose changes in this PR, so those validation commands were not run.

Risk

Low. This PR is CSS and markup only across three existing pages — no data, API, or state-management changes. Build and test coverage above confirm the pages still compile and prerender correctly. The main residual risk is on the two new viewport breakpoints, since they were verified by code inspection rather than a live browser resize test this session.

Rollout and Recovery

Standard merge-and-deploy; no feature flag or migration involved. If a visual regression surfaces after merge, it is revertible via a single git revert of this commit since the change is isolated to three files with no downstream dependents.

[markboenigk]

This PR now conflicts with main — gh pr view 231 reports mergeable: CONFLICTING. It was branched before #227 merged, and #227 rewrote two of the three files this PR touches, so a plain conflict resolution won't be safe here. Details below (verified with a local git merge-tree dry-run against current main).

File-by-file

app/ui/src/app/page.tsx (landing) — clean, no conflict. #227 barely touched this file, so all of this PR's changes here (subtitle min-height, flex-wrap/min-width/520px breakpoint, .landing-card-cta:hover, priority on the two icons) still apply as-is.

app/ui/src/app/upload-route/page.tsx — real conflict. #227 replaced this page's body entirely with the shared HiFiUploadPage component, so the old dropzone/file-row JSX this PR patches (adding aria-hidden="true" to the checkmark SVG) no longer exists. This fix is also moot: HiFiUploadPage.tsx already has aria-hidden="true" on the equivalent SVG. Recommend dropping this hunk entirely rather than trying to reapply it.

app/ui/src/app/welcome/page.tsx — real conflict, and the trickiest one. #227 restructured this page (wrapped content in .welcome-main, reordered the cards to "Start new session" first, and already moved .welcome-back off position: absolute into normal flow with align-self: center; margin-top: 24px). That means:

• The @media (max-height: 640px) block here that pulls .welcome-back out of absolute positioning is solving a problem feat(ui): align onboarding uploads with hi-fi designs #227 already solved a different way. Please verify in an actual short-viewport browser whether the overlap still happens on current main before re-adding this — it may now be dead CSS.
• A naive "accept theirs" conflict resolution would silently revert feat(ui): align onboarding uploads with hi-fi designs #227's card reordering and .welcome-main wrapper. Please resolve by hand, on top of feat(ui): align onboarding uploads with hi-fi designs #227's current structure.
• The still-good parts (subtitle min-height, flex-wrap/min-width/520px breakpoint, .welcome-card-cta:hover, priority on the two icons) should be reapplied onto the current (reordered) JSX.

Suggested path forward

1. Rebase (or merge main into) landing-redesign and resolve by hand per the above, rather than relying on auto-merge.
2. Re-run lint/typecheck/test/build after the rebase — none of that has run against the current main.
3. This PR's own description already flagged the two viewport breakpoints as verified by code inspection only, not a live resize test. Given the conflict and the likely-redundant .welcome-back fix, that manual check is now load-bearing rather than optional — please do it before merging.

Everything else in this PR (hover-target fix, subtitle parity, mobile card wrapping, image priority) looks good and low-risk once rebased.

[markboenigk]

Following up on the merge-conflict note above: Gill87 posted a PR comparison on #227 (#227 (comment)) sizing up #227 vs #230 vs #231 before #227 merged, and its recommendation for this PR lines up with the conflict analysis here — worth surfacing since it changes the right next step.

Recommendation: narrow this PR instead of rebasing it whole

The #227 comparison explicitly calls out:

What to Take from PR 231 (after merging 227): Port the ≤520px landing/welcome card stacking; port the CTA-only hover behavior.
Skip: Replacing 227's normal-flow Back button with 231's absolute-position + max-height breakpoint implementation — PR 227 already handles this area more cleanly.

That matches what the conflict analysis above found independently: .welcome-back is no longer position: absolute on main at all (227 moved it into normal flow as part of the .welcome-main restructure), so the @media (max-height: 640px) override here would be dead code, and the upload-route aria-hidden hunk targets JSX that #227 deleted (already covered in HiFiUploadPage.tsx).

Given two independent passes landed on the same conclusion, I'd suggest not rebasing this PR wholesale. Instead:

• Cut a smaller PR (or let us cherry-pick directly onto main) containing only:
  • the flex-wrap/min-width/520px card-stacking breakpoint on landing + welcome
  • the .card-cta:hover-only hover fix
  • the subtitle min-height: 46px parity fix
  • priority on the four hero icons
• Drop the .welcome-back short-viewport change and the upload-route aria-hidden change — both are superseded by feat(ui): align onboarding uploads with hi-fi designs #227.

That gets the real value of this PR in with a clean, conflict-free diff. I'd suggest closing this PR in favor of that narrower one rather than resolving the current conflicts by hand. Happy to put up the cherry-picked version if that's easier than you redoing it.