style(desktop): update TopBar component styles and improve accessibility

[Ipriyankrajai]

• Adjusted max-width for project name display in TopBar for better responsiveness.
• Enhanced OpenInMenuButton with aria-label for improved accessibility.
• Modified button padding and visibility of elements based on screen size for a cleaner UI.
  https://drive.google.com/file/d/15CZ7wjQSlZYhslyS23wiLqTOkfM3xMQC/view?usp=sharing

Summary by CodeRabbit

• Improvements
  • Enhanced responsive layout for the dashboard top bar with optimized width constraints across different screen sizes
  • Improved accessibility with clearer labeling for interface controls
  • Optimized text visibility and button spacing on smaller screens for better mobile experience

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates the TopBar title width constraint to use responsive viewport-based calculations instead of fixed pixels, and enhances the OpenInMenuButton with improved accessibility labeling and responsive styling adjustments for padding and text visibility.

Changes

Cohort / File(s)	Summary
TopBar Responsive Layout apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/TopBar.tsx	Changed centered title max-width from fixed 300px to responsive calc-based constraints: max-w-[calc(100vw-36rem)] with max-w-[calc(100vw-52rem)] at lg breakpoint for improved viewport adaptation.
OpenInMenuButton Accessibility & Responsiveness apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/OpenInMenuButton/OpenInMenuButton.tsx	Added aria-label for accessibility, refined button padding with responsive variants, and implemented responsive visibility for branch label and "Open" text (hidden on small screens, shown on larger viewports).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• fix(desktop): update TopBar to display project and workspace names together #1233: Modifies TopBar title rendering and adjusts max width constraints—directly related to the responsive title width changes in this PR.
• feat: project name in title bar #1195: Adjusts TopBar title handling and centered project-name overlay—closely related to title layout improvements.
• fix(desktop): restore OpenInMenuButton to TopBar #749: Updates TopBar and OpenInMenuButton UI components—related through both affected components in this PR.

Poem

🐰 The viewport now bends to our will,
With calc() wisdoms and responsive skill,
Accessible buttons, padding so neat,
Hidden on small screens, on large ones sweet! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers key changes but is missing required template sections (Related Issues, Type of Change, Testing, Screenshots, Additional Notes).	Expand the description to include the missing template sections, particularly specifying the type of change (e.g., Refactor) and describing any testing performed.
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 (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: updating TopBar component styles and improving accessibility through aria-label additions.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

apps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/OpenInMenuButton/OpenInMenuButton.tsx (1)

89-89: Minor: sm:pl-1.5 is redundant.

px-1.5 already sets padding-left: 0.375rem at all breakpoints. The sm:pl-1.5 doesn't change anything since it applies the same value. You can simplify to just px-1.5 sm:pr-2.

Suggested simplification

-"group flex items-center gap-1.5 h-6 px-1.5 sm:pl-1.5 sm:pr-2 rounded-l border border-r-0 border-border/60 bg-secondary/50 text-xs font-medium",
+"group flex items-center gap-1.5 h-6 px-1.5 sm:pr-2 rounded-l border border-r-0 border-border/60 bg-secondary/50 text-xs font-medium",

---

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

[Kitenite]

Love it!