[web] Prevent life event controls from overlapping - #2278
Conversation
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
📝 WalkthroughWalkthroughLifeEventsPanel now uses responsive stacking for event controls and the add-event form, with regression tests and Storybook scenarios covering narrow layouts, Travel Week data, and loading behavior. ChangesLife Events responsive controls
Estimated code review effort: 2 (Simple) | ~15 minutes Assessment against linked issues
Out-of-scope changes
Suggested labels: 🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
Reviewer's GuideMakes LifeEventsPanel controls responsive on narrow web viewports by stacking controls, allowing the pill list to shrink, and adding colocated regression tests and a Storybook Travel Week scenario to prevent overlapping controls. State diagram for responsive LifeEventsPanel controls layoutstateDiagram-v2
[*] --> MobileBelowSm
MobileBelowSm: viewport < sm
MobileBelowSm --> DesktopSmAndAbove: viewport >= sm
DesktopSmAndAbove --> MobileBelowSm: viewport < sm
state MobileBelowSm {
[*] --> MobileControls
MobileControls: stacked controls
state MobileControls {
EventList: flex min-w-0 flex-wrap
AddButton: w-full shrink-0
FormGrid: grid-cols-1
TypeChoices: flex-col
FormActions: flex-col
}
}
state DesktopSmAndAbove {
[*] --> DesktopControls
DesktopControls: horizontal layout
state DesktopControls {
EventList: flex-row flex-wrap
AddButton: sm:w-auto
FormGrid: sm:grid-cols-2
TypeChoices: sm:flex-row
FormActions: sm:flex-row sm:justify-end
}
}
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
PR Summary by QodoPrevent Life Event Controls from Overlapping on Narrow Screens
AI Description
Diagram
High-Level Assessment
Files changed (4)
|
|
Storybook previews for This comment updates automatically on each PR push. |
Code Review by Qodo
Context used✅ Compliance rules (platform):
167 rules✅ Skills:
fix-provider, write-tests, cloudflare 1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
|
Review follow-up: added the required deterministic loading Storybook state in d2cad36 and resolved the inline thread. I did not adopt the optional exported-builder suggestion: AGENTS.md explicitly prohibits production exports solely for testability, while these tests exercise the public rendered component behavior. The responsive Storybook measurements provide the browser-level layout proof. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/superpowers/plans/2026-07-28-life-events-responsive-controls.md`:
- Line 9: Update the Life Events plan to comply with AGENTS.md by including
equivalent implementation and tests for both packages/web and packages/mobile,
while preserving the existing behavior requirements. If the change must remain
web-only, document an explicitly approved exception and its rationale instead of
prohibiting native mobile updates.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 612de2f2-cbcd-4c47-8f7c-0249264c588c
📒 Files selected for processing (4)
docs/superpowers/plans/2026-07-28-life-events-responsive-controls.mdpackages/web/src/components/LifeEventsPanel.stories.tsxpackages/web/src/components/LifeEventsPanel.test.tsxpackages/web/src/components/LifeEventsPanel.tsx
Asherlc
changed the title
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
|
🤖 Review skipped: Repository rate limit exceeded. Free accounts are limited to 2 reviews per 4 hours per repository. Upgrade to a paid plan for unlimited reviews. |
Summary
+ Add eventon narrow web viewports while restoring the existing row layout atsmsmso enlarged text remains operableRoot cause
The wrapping event-pill group and non-shrinking add button shared an always-horizontal flex row. The pill group retained its automatic minimum width, so the two controls competed for the same narrow line. The add form had the same narrow-layout assumption in its fixed two-column grid and horizontal control groups.
Responsive proof
Production Storybook
Body/LifeEventsPanel/TravelWeekwas measured with browser viewport emulation:The 320 px / 200% open-form screenshot was visually inspected; the full event date, form fields, and action controls remained visible.
Testing
pnpm exec vitest run --project unit packages/web/src/components/LifeEventsPanel.test.tsxpnpm --filter dofek-web build-storybookpnpm exec biome check packages/web/src/components/LifeEventsPanel.tsx packages/web/src/components/LifeEventsPanel.test.tsx packages/web/src/components/LifeEventsPanel.stories.tsxpnpm --filter dofek-web typecheckpnpm typecheckpnpm spellcheckpnpm knippnpm lintCI=1 pnpm test(921 files, 14,451 tests passed; 21 skipped)Fixes #2159
Summary by Sourcery
Improve Life Events panel responsiveness on narrow web viewports to prevent overlapping controls and ensure accessibility with enlarged text.
New Features:
Bug Fixes:
Enhancements:
Tests:
Summary by cubic
Fixes #2159 by preventing the Life Event pills and “+ Add event” from overlapping on small web screens. Controls stack below sm and return to a row at sm+, and the add form is now mobile-friendly.
Bug Fixes
min-w-0) and make “+ Add event” full-width on mobile;sm:w-autoon desktop.New Features
TravelWeek(mobile viewport) andLoadingstories.Written for commit 942ade6. Summary will update on new commits.
Summary by CodeRabbit
New Features
Bug Fixes
Tests