[cristim]

Summary

Part of #1153 (PR2 of 3). The read-only inline schedule preview from #1177 now also shows when editing a plan, and the plan modal is laid out so both fit.

• 17035f4f feat(plans): openPlanForm mounts the inline preview for Edit as well as Create. New jest tests use a real modal fixture with fake timers. Before the change Edit rendered 0 steps; after it renders 4 (weekly 25%), 3 (custom 33%) and 10 (monthly 10%). A weekly 20% plan shows 1 step, which documents the pre-existing prefill bug fix(plans): Edit pre-selects Immediate for weekly/monthly ramps with non-preset percents #1156.
• d3966f92 feat(plans): Edit gets its own notice via a restartsFromToday panel option: "This preview restarts from today for a plan already in progress; executed purchases are not shown."
• bacf0a2f feat(plans): layout, using grid-template-areas with no DOM change.
  • Desktop: the form is the first column (minmax(360px, 440px)) and the preview sits beside it, sticky.
  • 860 px or narrower: one column, with the form first and the preview after it.
  • 480 px or narrower: less modal padding.
  • Dense schedules: they scroll horizontally inside the preview region, not the page.
  • e2e: the Edit and layout assertions land here.

Layout checked in Playwright (Create and Edit, 900 px viewport height)

Width	Layout
1440	Form 440 px on the left; preview 752 px on the right, plot fully visible, pinned while the form scrolls
1280	Form 440 px; preview 688 px
390	Single column, preview below the form; the 640 px plot scrolls inside a 332 px region; no page overflow; Cancel fully visible
320	Single column; no page overflow; Cancel inside the viewport but cramped, since three footer buttons share 264 px. PR3 removes Preview schedule

The spec asserts the form width (at least 360 px), the preview's position and position: sticky above 860 px, stacking at 860 px and below, no page overflow, and the Cancel button inside the viewport.

Size

Counted as added + deleted from git diff --numstat origin/main...HEAD, tests and e2e included. 3 commits: +66/-5, +17/-6, +26/-4.

Verification

Evidence is posted as PR comments.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

• Run on-demand review

_{This review includes 6 billable files and costs up to $1.50.}

• Ask an admin to make reviews automatic

Open in CodeRabbit

Reviews can continue after your included limit without a manual trigger. An admin must approve usage-based billing.

Or wait 3 minutes for your next included review.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available. Your 86 included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: Repository: LeanerCloud/cloud-commitments-platform/.coderabbit.yaml
• Review profile: CHILL
• Plan: Essentials
• Run ID: 47ec0560-a31c-411f-a2b0-ea8294a5d95a

📥 Commits

Reviewing files that changed from the base of the PR and between 0a1f978 and 08706a2.

📒 Files selected for processing: 6

• frontend/src/__tests__/plans.test.ts
• frontend/src/index.html
• frontend/src/plan-editor-panel.ts
• frontend/src/plans.ts
• frontend/src/styles/plans.css
• frontend/tests-e2e/plan-schedule-preview.spec.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

[cristim]

Merge gate at 08706a20829bcfa8c3b4aa061cd6cc63aed64b86

Two independent reviewers (cold brief, non-author) each made two passes. Both approve 08706a20.

Pass 1 (at bacf0a2f), both requested changes:

• Tests: the "reopening Create after Edit" test could not detect a missed dispose. Three mutants survived: no dispose at the top of openPlanForm, a no-op onClose dispose, and dropped panel removeEventListener calls.
• Layout and accessibility:
  • The sticky panel (~620 px) had no height cap, so at 768 px tall its lower part was clipped and unreachable.
  • The DOM order (panel before form) was the reverse of the new visual order (form first), so tab and screen-reader order were wrong.
  • At 861 px the panel was only ~300 px wide.
  • The e2e checks hard-coded a 900 px viewport.

Pass 2 (at 08706a20):

• Leak tests (4c4756f9): spies on the form's input/change/invalid/submit listeners. Edit then close leaves nothing; Edit then Create leaves exactly one set. All three earlier survivors now fail, and so do probes that drop the submit and invalid removals.
• Layout (08706a20):
  • The panel follows the form in index.html. The e2e asserts the sibling order and the Tab and Shift+Tab sequence (advanced settings, then preview region, then Cancel).
  • Above 960 px the sticky panel gets max-height: calc(100dvh - 230px) with overflow: auto. The 230 px is the modal chrome, which is fixed-height above 960 px and the same in Create and Edit. The reviewer found it acceptable: max-height: 100% cannot resolve against the max-content row. The e2e at 1280x768 checks that the panel fits the scroller and that its last help line can be scrolled into view.
  • The layout stacks at 960 px, and the e2e loop adds 1024x900 and 1280x768.

Local verification (macOS, exact head, worktree clean):

• npm ci, npm run build, npm run lint (0 errors) and npx jest (109 suites, 3478 passed, 1 skipped) pass.
• tests-e2e/plan-schedule-preview.spec.ts passes 6/6 at 1440x900, 1280x900, 1280x768, 1024x900, 390x900 and 320x900.
• I and the reviewers looked at Create and Edit screenshots at 1440, 1280, 390 and 320, plus Edit at 1280x768 unscrolled and with the panel scrolled to the end:
  • Desktop: form 440 px on the left; preview on the right showing the Edit "restarts from today" notice.
  • Phones: single column, form first, no page overflow.
  • 320: Cancel is cramped but inside the viewport, since three footer buttons share the width. PR3 removes Preview schedule.

Open product question for @IAmJSD on #1153: on phones the preview sits below the whole form. The default keeps it there; the alternatives move it next to the ramp cards or add a "preview below" link.

Threads: none open. CodeRabbit is waived as a merge gate.