fix: use the shadcn scrollbar for the dev UI sidebar

[cossssmin]

Problem

The dev UI sidebar (template list) showed the native browser scrollbar, unlike the preview pane which uses the shadcn ScrollArea bar.

Cause

The list is wrapped in <ScrollArea class="flex-1"> inside <SidebarContent>, but the ScrollArea has no min-h-0. A flex child defaults to min-height: auto, so the ScrollArea grew to its full content height instead of being bounded by the flex container. Its internal viewport therefore never needed to scroll — the custom scrollbar never engaged — and the overflow fell through to SidebarContent (overflow-auto), surfacing the native bar.

Fix

Add min-h-0 so the ScrollArea is height-bounded, its viewport scrolls internally, and the shadcn scrollbar is used — matching the preview pane.

-        <ScrollArea class="flex-1">
+        <ScrollArea class="flex-1 min-h-0">

One-line change, isolated to the dev UI.

Summary by CodeRabbit

• Bug Fixes
  • Improved sidebar layout behavior so its scrollable area shrinks correctly and remains usable across varying content sizes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7ae8f54b-15e2-4bb2-be3b-ca2070c6ceba

📥 Commits

Reviewing files that changed from the base of the PR and between 8237e78 and fd0341b.

📒 Files selected for processing (1)

• src/server/ui/App.vue

---

📝 Walkthrough

Walkthrough

The sidebar ScrollArea now uses min-h-0 with flex-1. This allows the container to shrink within the sidebar flex layout.

Changes

Sidebar layout

Layer / File(s)	Summary
ScrollArea sizing src/server/ui/App.vue	The sidebar scroll container now uses flex-1 min-h-0.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

• maizzle/framework#1817: Both changes modify the sidebar ScrollArea layout in src/server/ui/App.vue.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the sidebar scrollbar change described in the objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/dev-ui-sidebar-scrollbar

---

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.}