fix(website): improve mobile cards, disclosures and app scrolling - #2756
Conversation
Show all five workflow steps in compact stacked cards below1000px and remove the swipe hint. Match the app-strip label to the shared uppercase eyebrow. Enable app auto-scroll on touch screens, yielding to touch, mouse and wheel interaction while retaining the existing focus, pause and reduced-motion policy. Refs #2755 Self-audit-grep: rg -n 'compatible|hood-steps|scroll-snap|eyebrow' website/src/components/home website/src/scripts/home/apps.js website/src/styles/home Self-audit-owner: website/src/scripts/home/apps.js owns local strip interaction; motion.js retains global scheduling; existing CSS owners retain layout
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1d9273636b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Keep the aria-hidden loop copy and list padding stable when reduced motion changes. The existing controller still stops playback. This prevents native scroll clamping and stale-position jumps without another preference handler. Review finding: REPRODUCIBLE. At390px the native position changed1910 to1550 when the clone hid, then jumped to1914 after motion resumed. Refs #2755 Self-audit-grep: rg -n 'compatible|reduced-motion' website/src/styles/home/apps.css website/src/scripts/home/apps.js Self-audit-owner: website/src/styles/home/apps.css owns track geometry; motion.js owns reduced-motion eligibility
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bc286ae073
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Use the existing contact start/end path for all non-touch pointers. Keep touch lifetime handling and mouse-only hover unchanged. Review finding: HYPOTHETICAL for physical native pen panning; trusted Chromium pen events already paused through the focus guard. Accept the two-condition defensive change because the potential conflict is silent. Refs #2755 Self-audit-grep: rg -n 'pointerType|focused' website/src/scripts/home/apps.js website/src/scripts/home/motion.js Self-audit-owner: website/src/scripts/home/apps.js owns contact state; motion.js owns focus and motion eligibility
|
@codex review |
|
Codex Review: Didn't find any major issues. Chef's kiss. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Use one pointer-gesture binder for cleanup and use-case cards, feeding their existing selection functions. Preserve vertical scrolling, control taps, manual playback and reduced motion; cancel interrupted or multi-contact input. Replace the bulk cleanup explanation toggle with native details rows. Frame the mobile use-case demo with a shorter illustration and visible swipe hint, retaining desktop composition and the existing examples. Refs #2755 Self-audit-grep: rg -n 'bindSwipe|touchstart|setGuards|polish-guards-toggle|data-swipeable' website/src/scripts/home website/src/components/home website/src/styles/home Self-audit-owner: swipe.js owns gesture direction only; existing choose functions own selection; native details owns expansion
Apply manual playback state only once horizontal intent is recognized. Taps and vertical scrolling no longer pin the cleanup or use-case demo. Review finding: REPRODUCIBLE with native mouse input in the mobile preview. A vertical drag changed the cleanup clock from running to paused despite page motion enabled, no reduced motion and no focus inside the section. Refs #2755 Self-audit-grep: rg -n 'onStart|horizontal|pinned|auto = false' website/src/scripts/home/swipe.js website/src/scripts/home/cleanup.js website/src/scripts/home/cases.js Self-audit-owner: swipe.js recognizes horizontal intent; each caller owns manual playback state
Allow vertical scrolling inside the mobile illustrated app when its contents outgrow the compact preview. Preserve the card dimensions and horizontal clipping. Runtime validation:20px result text at320px exposed clipped final lines in the coding, Slack, Discord and Notes examples; their host scrollHeight exceeded clientHeight. This makes that existing overflow reachable without resizing the page. Refs #2755 Self-audit-grep: rg -n 'overflow-y|host-app|height: 400px' website/src/styles/home/use-cases.css Self-audit-owner: use-cases.css owns mobile demo viewport behavior
Use the reviewed upper crop for all nine mobile use-case illustrations. Keep their desktop focal positions unchanged. The shorter banner otherwise cuts into the remote-worker character's head. Refs #2755 Self-audit-grep: rg -n object-position website/src/styles/home/use-cases.css Self-audit-owner: use-cases.css owns mobile artwork framing
saurabhav88
changed the title
|
@codex review |
|
Codex Review: Didn't find any major issues. More of your lovely PRs please. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
1 participant
Summary
Improve mobile browsing on the homepage: all five workflow steps are visible, the app strip scrolls automatically, and the cleanup and use-case examples respond to horizontal swipes and dragging in the mobile preview. Each cleanup explanation now expands from its full row.
Closes #2755
Changes
Validation
build-checkgreen.fc351d7e; no unresolved threads.Browser tests use Chromium emulation and trusted input events, not physical-device Safari or OS-native stylus panning. Native app build, dictation UAT and release versioning are not applicable to this Content-only change.
Preview: http://127.0.0.1:8878/#polish and http://127.0.0.1:8878/#people
Evidence:
.validation/runs/2026-09-10T02-50-26Z-fc351d7e/in the mobile worktree; durable review/browser records in the main checkout's.validation/homepage-mobile/.Code quality