fix(sidebar): truncate long item titles to prevent overflow

[impoiler]

Summary

Sidebar item titles were overflowing their containers when text was long, causing layout issues. This fix ensures text is properly truncated with ellipsis instead of breaking the sidebar layout.

Changes

• Added min-w-0 to flex containers in sidebar items and sub-items to allow proper shrinking within flex layouts
• Added truncate and min-w-0 to title <span> elements so long text is clipped with an ellipsis rather than overflowing
• Added shrink-0 to sub-item icons to prevent them from being compressed when adjacent text truncates

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

Navigate to a sidebar that contains items or sub-items with long titles and verify that the text truncates cleanly with an ellipsis rather than overflowing or wrapping outside the sidebar bounds.

cd ui
pnpm i || npm i
pnpm build || npm run build

Screenshots/Recordings

Add before/after screenshots showing the sidebar with long item titles to confirm truncation behavior.

Breaking changes

• Yes
• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: e7dfd08d-8b8a-4505-915e-0230c59bc445

📥 Commits

Reviewing files that changed from the base of the PR and between 4b7d9e2 and a5e04ed.

📒 Files selected for processing (1)

• ui/components/sidebar.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Summary

Summary by CodeRabbit

• Bug Fixes
  • Improved sidebar navigation layout to prevent horizontal overflow.
  • Long navigation labels now truncate cleanly in expanded and collapsed sidebar views.

Walkthrough

The sidebar updates item and submenu layouts to allow content shrinking, truncate long titles, and preserve icon sizing in expanded and collapsed views.

Changes

Sidebar overflow handling

Layer / File(s)	Summary
Sidebar and submenu content sizing ui/components/sidebar.tsx	Sidebar items and submenus now shrink within available space, truncate long titles, and prevent icons from shrinking.

Priority: ⬇️ Low

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

Suggested reviewers: akshaydeo

Merge Risk: ⚪ Minimal · up to cd368

The sidebar truncation and sizing updates are ready to merge with no identified user-facing regression risk.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
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.
Description check	✅ Passed	The description clearly explains the sidebar overflow bug, lists the UI changes, identifies the change as a bug fix, and provides validation steps. Screenshots, related issues, and checklist confirmat…
Title check	✅ Passed	The title clearly and concisely describes the primary change: truncating long sidebar item titles to prevent overflow.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 09-11-fix_ui_sidebar_menus_trucation

---

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

[impoiler]

• fix(sidebar): truncate long item titles to prevent overflow #7069 👈 (View in Graphite)
• feat(mcp-usage-guide): add OAuth and IdP token auth methods alongside virtual key #7111
• feat(redaction): surface literal regions and service URLs in plaintext via RedactedIfSecret #7085
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[akshaydeo]

Merge activity

• Sep 12, 6:38 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Sep 12, 6:40 AM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.