fix(ui): adjust padding for logo for mac

[Shironex]

Resolve

• Closes [Bug]: Window icons overlap with Automaker logo #718

Summary by CodeRabbit

• Bug Fixes
  • Fixed sidebar header, navigation, and project switcher spacing on macOS (Electron) so content no longer overlaps window controls and maintains consistent vertical alignment.
  • Applied conditional top-padding adjustments in affected views so sidebar elements render correctly in macOS Electron environments.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[gemini-code-assist]

Summary of Changes

Hello @Shironex, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a user interface alignment issue on macOS when running the application in an Electron environment. It adjusts the top padding of key sidebar components to prevent the logo and other elements from overlapping with the macOS traffic light controls, thereby enhancing the visual consistency and user experience on that platform.

Highlights

• UI Padding Adjustment: Increased the top padding for the sidebar header and navigation components specifically for macOS Electron environments to improve logo alignment.
• Conditional Styling: Modified the pt-[10px] class to pt-[38px] for elements when isMac and isElectron() conditions are met, ensuring proper spacing.
• Dependency Imports: Added imports for isMac and isElectron utility functions in sidebar-navigation.tsx to support the new conditional styling logic.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

📝 Walkthrough

Walkthrough

Replace hard-coded small top paddings with a new MACOS_ELECTRON_TOP_PADDING_CLASS and apply it conditionally when running on macOS within Electron (affects sidebar header, navigation, and project switcher). A new exported constant was added.

Changes

Cohort / File(s)	Summary
Sidebar constants apps/ui/src/components/layout/sidebar/constants.ts	Add exported MACOS_ELECTRON_TOP_PADDING_CLASS = 'pt-[38px]'.
Sidebar header apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx	Import and replace hard-coded pt-[10px] with MACOS_ELECTRON_TOP_PADDING_CLASS for collapsed and expanded header wrappers.
Sidebar navigation apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx	Add imports isMac, isElectron, and MACOS_ELECTRON_TOP_PADDING_CLASS; use the constant for top padding when in Discord mode on macOS Electron, otherwise keep existing padding (pt-3 or mt-1).
Project switcher apps/ui/src/components/layout/project-switcher/project-switcher.tsx	Import isMac, isElectron, and MACOS_ELECTRON_TOP_PADDING_CLASS; apply conditional top padding to the Automaker logo header (use constant on macOS Electron, pt-3 otherwise).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix(ui): prevent logo from overlapping macOS traffic light buttons #217: Adjusts macOS-specific sidebar/header padding to avoid overlap with window controls.
• feat(ui): unified sidebar with collapsible sections and enhanced UX #659: Modifies sidebar components and layout/padding; touches similar files (header, navigation, project switcher, constants).

Suggested labels

Ready-To-Merge

Poem

🐰 On macOS where window lights gleam,
I hopped the top to save the theme.
From tiny ten to thirty-eight,
The logo’s safe — I celebrate! 🥕✨

🚥 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 directly relates to the main change: adjusting padding for the logo on macOS to prevent overlap with window controls.
Linked Issues check	✅ Passed	The PR successfully addresses issue #718 by introducing conditional padding for macOS Electron environments to prevent window action icons from overlapping the Automaker logo.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the macOS padding issue. Modifications to sidebar headers, navigation, project switcher, and new constants are all in scope for resolving the logo overlap problem.

_{✏️ 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
• Commit unit tests in branch fix/icon-posiition-on-mac

---

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

[gemini-code-assist]

Code Review

This pull request adjusts the top padding for UI elements on macOS when running in Electron to avoid overlapping with the window controls. The changes correctly fix the visual issue. However, the new padding value (38px) is hardcoded as a magic number in three different places across two files. My feedback focuses on improving maintainability by extracting this value into a shared constant. This will make the code cleaner and easier to update in the future.