Animate settings section expand and collapse

[silverbucket]

Expanding or collapsing a section in the Settings modal was jarring — the panel appeared and vanished instantly. It now slides.

Changes

packages/web/src/components/SettingsModal.svelte only:

• The desktop .expanded panel uses transition:slide at 200ms — the same transition and duration CollectionTodoTile already uses, so it matches the rest of the app. Covers expanding, collapsing (✕ or Escape), and switching directly between sections (old panel collapses while the new one opens).
• Duration drops to 0 when the OS has reduced motion enabled, via prefersReducedMotion from svelte/motion.
• The scroll-into-view that ran immediately after expanding now runs in onintroend, so it targets the panel's final height rather than a half-open one. Svelte still fires introend at zero duration, so reduced-motion users are still scrolled to the section.

Verification

• svelte-check: 0 errors. biome ci on the file matches master exactly (4 pre-existing CSS specificity warnings, nothing new).
• Drove the real app with Playwright, twice for consistency: expand height eases 0 → 92 → 138 → 155 → 157px over ~200ms, collapse mirrors it. With reduced motion it snaps to full height instantly and still lands in view. Mid-switch frame is clean — the old panel shrinks to its header while the new one grows with content clipped.

Mobile is untouched: that flow swaps the whole tile grid for a detail page rather than expanding in place, so a slide doesn't apply there.

[coderabbitai]

Warning

Review limit reached

Next included review available in 49 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 09f0e148-6e67-4d47-ab60-f6e96dd424b3

📥 Commits

Reviewing files that changed from the base of the PR and between a0bd0a4 and 7b753a5.

📒 Files selected for processing (1)

• packages/web/src/components/SettingsModal.svelte

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[cursor]

Stale comment

Security review

Outcome: no medium, high, or critical findings.

Reviewed the single-file change in packages/web/src/components/SettingsModal.svelte (desktop settings expand/collapse animation).

• No new attacker-controlled inputs or sinks. section.id is a closed SectionId union from SETTINGS_SECTIONS; getElementById / scrollIntoView are not injection sinks here.
• transition:slide and prefersReducedMotion are first-party Svelte APIs already used elsewhere in the app. Duration is a bounded constant (0 or 200).
• No dependency, authn/authz, secret-handling, or serialization changes.

Prior automation review threads: none. Slack summary skipped (no Slack destination configured for this run).

  

_{Sent by Cursor Automation: Find vulnerabilities}

[Copilot]

🟢 Approval recommended

The change is localized to the Settings modal UI, follows existing transition patterns, and includes reduced-motion handling without altering the mobile flow.

Pull request overview

This PR smooths the desktop Settings modal UX by animating section expand/collapse instead of instantly showing/hiding the expanded panel, aligning the interaction with existing slide transitions used elsewhere in the app.

Changes:

• Add transition:slide (200ms) to the desktop expanded settings panel.
• Respect OS “reduced motion” by setting transition duration to 0 via prefersReducedMotion.
• Move the post-expand scrollIntoView behavior to introend so scrolling occurs after the panel reaches its final height.

File summaries

File	Description
packages/web/src/components/SettingsModal.svelte	Adds a slide transition for desktop-expanded settings sections, with reduced-motion handling and scroll timing moved to the transition’s completion.

Review details

• Files reviewed: 1/1 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cursor]

Security review

Outcome: no medium, high, or critical findings.

Re-reviewed the single-file change in packages/web/src/components/SettingsModal.svelte (desktop settings expand/collapse animation) on 7b753a5.

• No new attacker-controlled inputs or sinks. section.id is a closed SectionId union from SETTINGS_SECTIONS; getElementById / scrollIntoView are not injection sinks here.
• transition:slide and prefersReducedMotion are first-party Svelte APIs already used elsewhere in the app. Duration is a bounded constant (0 or 200).
• No dependency, authn/authz, secret-handling, or serialization changes.

Prior automation review threads: none (previous run also reported no findings; no inline threads to re-validate). Slack summary skipped (no Slack destination configured for this run).

  

_{Sent by Cursor Automation: Find vulnerabilities}