fix(sidebar): prevent title overflow on narrow widths

[Sandesh-Upadhyay]

Fixes sidebar title overflow when screen width is reduced (~50%).

• Added min-w-0 to allow proper flex shrinking
• Applied truncate to prevent overflow
• Ensured header icons don’t shrink

Closes #343

Summary by CodeRabbit

• Style
  • Improved sidebar and header layout to prevent text overflow and ensure proper truncation on mobile and desktop.
  • Strengthened flex constraints to stop unintended element growth and maintain alignment.
  • Adjusted toggle and close-button layout for more consistent responsive behavior.

[vercel]

@Sandesh-Upadhyay is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f988173-d19f-4062-8f5c-3bd382c16dd3

📥 Commits

Reviewing files that changed from the base of the PR and between b1a9f83 and 7bf3114.

📒 Files selected for processing (1)

• apps/web/src/components/dashboard/Sidebar.tsx

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

• apps/web/src/components/dashboard/Sidebar.tsx

---

📝 Walkthrough

Walkthrough

Applied CSS utility class adjustments in the Sidebar component to constrain flex children and enable truncation, preventing the Opensox AI title from overflowing in narrow layouts; minor alignment and collapse-toggle layout tweaks were also made.

Changes

Cohort / File(s)	Summary
Sidebar Layout & Overflow Fix apps/web/src/components/dashboard/Sidebar.tsx	Added min-w-0, flex-1, truncate, overflow-hidden, and shrink-0 to header and link elements to enable truncation and prevent overflow; adjusted collapse toggle wrapper to enforce shrink-0 and center when collapsed; minor responsive alignment class tweaks.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• PR #172: Modifies the same apps/web/src/components/dashboard/Sidebar.tsx—overlapping UI/layout changes (overlay, animation, className/layout updates).

Poem

🐰
In the sidebar where long names sprawled,
I tucked them in so none would fall,
With truncate and min-w-0 in place,
The title now keeps perfect grace,
A tiny hop, a tidy space. 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding CSS properties to prevent sidebar title overflow on narrow screen widths, which directly addresses the linked issue.
Linked Issues check	✅ Passed	The pull request directly addresses issue #343 by implementing the required fix: adding min-w-0 and truncate properties to prevent sidebar title overflow on narrow widths.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the sidebar title overflow issue; no unrelated modifications to other components or functionality were introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/components/dashboard/Sidebar.tsx`:
- Line 94: The class string in the Sidebar component uses a hardcoded hex color
("text-[`#eaeaea`]"); update the className in the Sidebar component (the JSX
element with className containing "text-[`#eaeaea`] font-semibold...") to use the
semantic design-token class (e.g., replace text-[`#eaeaea`] with text-ox-white) so
it follows the Tailwind design-token convention and matches other usages.
- Line 84: IconWrapper is currently a non-interactive div used for icon-only
controls (used with setShowSidebar and the collapse toggle), so refactor
IconWrapper to be keyboard-accessible by rendering a semantic <button> (or at
minimum adding role="button", tabIndex={0}, and an onKeyDown handler that
invokes the click handler on Enter/Space) and accept/forward an aria-label prop;
then update the call sites that use IconWrapper for closing the sidebar (where
setShowSidebar(false) is called) and the collapse toggle (where isCollapsed is
toggled) to pass aria-label="close sidebar" and aria-label={isCollapsed ?
"expand sidebar" : "collapse sidebar"} respectively (if IconWrapper already
exposes aria support just supply the labels). Ensure IconWrapper forwards
onClick and onKeyDown to make keyboard activation work.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cba5849 and b1a9f83.

📒 Files selected for processing (1)

• apps/web/src/components/dashboard/Sidebar.tsx

[Sandesh-Upadhyay]

I've resolved the previous review comments and synced the branch with upstream.
This PR now only contains the sidebar overflow fix for #343.

Please let me know if any further adjustments are needed.

[Sandesh-Upadhyay]

@apsinghdev The branch is now synced with upstream and review comments have been addressed.
Please let me know if any further changes are needed. Happy to update!