feat(dev-server): keep sidebar folder label on one line

[cossssmin]

What

Long folder/group paths in the dev server sidebar wrapped to multiple lines. Now they stay on a single line with native horizontal scroll (scrollbar hidden), and edge fades signal when there's more to scroll.

Changes

• src/server/ui/App.vue — the group label text renders in a scrollable <span> with a v-fade directive.
• src/server/ui/main.css — new scrollbar-hide and fade-scroll utilities.

Behavior

• Label stays on one line, scrolls horizontally, no visible scrollbar.
• Right edge fades only when there's more content to the right.
• Left edge fades only once scrolled away from the start.
• No fade at all when the label fits (short paths are unaffected).
• Recomputes on scroll, window resize, and label list changes.

Before

After

Summary by CodeRabbit

• New Features
  • Added horizontal scrolling for long sidebar directory labels.
  • Added subtle edge fades to indicate additional off-screen content.
  • Hidden scrollbars provide a cleaner appearance while preserving scrolling.

[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: d6636a7b-5bf4-4091-8c3d-e140b1a38d39

📥 Commits

Reviewing files that changed from the base of the PR and between 8231fc1 and e25871b.

📒 Files selected for processing (1)

• src/server/ui/App.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• src/server/ui/App.vue

---

📝 Walkthrough

Walkthrough

The UI adds a v-fade directive for horizontal overflow indicators. Sidebar directory labels become horizontally scrollable. CSS utilities hide scrollbars and apply configurable edge fades.

Changes

Sidebar scroll fading

Layer / File(s)	Summary
Scroll-aware directory labels src/server/ui/App.vue	The vFade directive updates fade variables during lifecycle, scroll, and resize events. Sidebar directory labels use horizontal scrolling with the directive.
Scrollbar and fade utilities src/server/ui/main.css	The stylesheet adds cross-browser scrollbar hiding and configurable left and right edge fade masks.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DirectoryLabel
  participant vFade
  participant Window
  participant ResizeObserver
  DirectoryLabel->>vFade: mount and update fade variables
  DirectoryLabel->>vFade: emit scroll events
  Window->>vFade: emit resize events
  ResizeObserver->>vFade: report size changes
  vFade->>DirectoryLabel: update horizontal edge fade state

Loading

🚥 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 summarizes the main change: keeping sidebar folder labels on one line.
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 feat/dev-server-folder-label-scroll

---

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

[coderabbitai]

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 `@src/server/ui/App.vue`:
- Around line 293-312: Update the vFade directive to create a ResizeObserver for
el that invokes the existing fade recalculation callback whenever the element
resizes, and store the observer on the element for cleanup. In unmounted,
disconnect that observer while preserving the existing scroll and window resize
listener cleanup.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e9393eaf-38bd-4ff3-ab43-d8524e35c26f

📥 Commits

Reviewing files that changed from the base of the PR and between 7c92ec0 and 8231fc1.

📒 Files selected for processing (2)

• src/server/ui/App.vue
• src/server/ui/main.css