fix(ui): prevent logo from overlapping macOS traffic light buttons by JBotwina · Pull Request #217 · AutoMaker-Org/automaker

JBotwina · 2025-12-22T17:30:31Z

Summary

Add macOS platform detection to the sidebar header component
Apply additional left padding (pl-20) and top padding (pt-4) on macOS only
Prevents the Automaker logo from overlapping with native window control buttons (close, minimize, maximize)

Test plan

Test on macOS: verify logo no longer overlaps with traffic light buttons
Test on Windows/Linux: verify no visual regression (padding should not be applied)
Test with sidebar expanded and collapsed states

Fixes #176

Summary by CodeRabbit

Style
- Updated sidebar header spacing with a macOS-specific padding tweak so the header aligns consistently across platforms while preserving expanded/collapsed behavior.
Bug Fixes
- Added macOS detection to ensure the spacing tweak applies only on macOS and improved header rendering robustness in non-browser or server-side environments.

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

Add platform detection to apply additional left padding (pl-20) and top padding (pt-4) on macOS to prevent the sidebar header/logo from overlapping with the native window control buttons (close, minimize, maximize). Fixes AutoMaker-Org#176

coderabbitai · 2025-12-22T17:30:42Z

Warning

Rate limit exceeded

@JBotwina has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 0 minutes and 32 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 3c48b2c and 53c1a46.

📒 Files selected for processing (1)

apps/ui/src/lib/utils.ts

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds an SSR-safe macOS detection constant and uses it in SidebarHeader to conditionally apply pt-4 pl-20 padding when the app runs on macOS; existing expanded/collapsed behavior and public signatures remain unchanged.

Changes

Cohort / File(s)	Summary
macOS detection utility `apps/ui/src/lib/utils.ts`	Adds `export const isMac: boolean` that detects macOS across Node/Electron and browser environments using `process.platform`, `navigator.userAgent`, and `navigator.platform` with SSR guards.
Sidebar header layout `apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx`	Imports `isMac` and updates `SidebarHeader` container `className` to include `pt-4 pl-20` when the sidebar is collapsed and `isMac` is true; includes a non-functional comment about macOS spacing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Areas to check:
- SSR safety: guards where process, navigator, or navigator.userAgentData may be undefined
- Platform string coverage for macOS versions (userAgent/userAgentData and navigator.platform)
- Visual validation on macOS (logo vs. window control buttons) for both expanded and collapsed sidebar states

Poem

🐰 I hopped a little, nudged the top,
On Mac the header found its spot.
With server-safe checks and tiny cheer,
The logo sits where it’s clear. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ 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 clearly and specifically describes the main change: preventing logo overlap with macOS traffic light buttons, which is the primary objective of the PR.
Linked Issues check	✅ Passed	The code changes implement macOS platform detection and apply layout adjustments (pl-20 and pt-4 padding) to the sidebar header, directly addressing issue #176's requirement to prevent logo overlap with macOS control buttons.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to addressing the logo overlap issue on macOS; the isMac utility and its application in sidebar-header.tsx are both necessary for the stated objective with no extraneous modifications.

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

gemini-code-assist · 2025-12-22T17:30:42Z

Summary of Changes

Hello @JBotwina, 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 specific UI rendering issue on macOS where the Automaker logo in the sidebar header was obscuring the native window control buttons. By introducing platform-specific detection and conditional padding, the logo is now correctly positioned on macOS without impacting the visual layout on other operating systems, ensuring a consistent and functional user experience across platforms.

Highlights

macOS Platform Detection: Implemented a mechanism to detect if the application is running on macOS within the sidebar header component.
Conditional UI Adjustment: Applied additional left padding (pl-20) and top padding (pt-4) specifically for macOS users to prevent UI overlap.
Logo Overlap Fix: Resolved an issue where the Automaker logo in the sidebar header would overlap with the native macOS traffic light buttons.

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

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

gemini-code-assist

Code Review

This pull request fixes a UI issue on macOS where the logo would overlap with the window's traffic light buttons. The approach is to detect the operating system and apply conditional padding. The implementation is straightforward. I've suggested a small improvement to use a more modern and future-proof API for OS detection, as the one currently used is deprecated.

…r.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

coderabbitai

Actionable comments posted: 2

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f17d062 and a2030d5.

📒 Files selected for processing (1)

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx

🔇 Additional comments (1)

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx (1)

27-29: Padding logic looks correct, but depends on accurate platform detection.

The conditional padding application (pt-4 pl-20 on macOS) is well-structured:

pl-20 (80px) provides adequate clearance for macOS traffic light buttons (typically 70-80px from left edge)

pt-4 (16px) prevents vertical overlap

The left padding correctly overrides px-3/lg:px-5 while preserving right padding

Works correctly in both expanded and collapsed sidebar states

However, the effectiveness depends entirely on isMac being accurately detected (see previous comments about detection issues).

Please verify the visual appearance as outlined in your test plan:

On macOS: confirm logo clears traffic light buttons in both sidebar states

On Windows/Linux: confirm no visual regression (padding not applied)

Test with window at different sizes to ensure responsive behavior

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 64bf02d and 3c48b2c.

📒 Files selected for processing (2)

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
apps/ui/src/lib/utils.ts

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

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx

gemini-code-assist Bot reviewed Dec 22, 2025

View reviewed changes

Comment thread apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx Outdated

JBotwina and others added 2 commits December 22, 2025 12:33

Update apps/ui/src/components/layout/sidebar/components/sidebar-heade…

a2030d5

…r.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

fix

64bf02d

coderabbitai Bot reviewed Dec 22, 2025

View reviewed changes

Comment thread apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx Outdated

Comment thread apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx Outdated

JBotwina marked this pull request as draft December 22, 2025 17:38

add more robust util fn

3c48b2c

JBotwina marked this pull request as ready for review December 22, 2025 17:44

coderabbitai Bot reviewed Dec 22, 2025

View reviewed changes

Comment thread apps/ui/src/lib/utils.ts Outdated

.includes is never called on undefined

53c1a46

Shironex added Enhancement Improvements to existing functionality or UI. Do Not Merge Use this label if something should not be merged. Testers-Requested Request for others to test an enhancement or bug fix/etc. labels Dec 22, 2025

webdevcody merged commit 6a8b206 into AutoMaker-Org:main Dec 22, 2025
5 checks passed

JBotwina deleted the fix/176-logo-macos-buttons-overlap branch December 22, 2025 18:26

coderabbitai Bot mentioned this pull request Jan 30, 2026

fix(ui): adjust padding for logo for mac #732

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): prevent logo from overlapping macOS traffic light buttons#217

fix(ui): prevent logo from overlapping macOS traffic light buttons#217
webdevcody merged 5 commits intoAutoMaker-Org:mainfrom
JBotwina:fix/176-logo-macos-buttons-overlap

JBotwina commented Dec 22, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Dec 22, 2025 •

edited

Loading

Rate limit exceeded

Other AI code review bot(s) detected

Uh oh!

gemini-code-assist Bot commented Dec 22, 2025

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

JBotwina commented Dec 22, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

gemini-code-assist Bot commented Dec 22, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JBotwina commented Dec 22, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Dec 22, 2025 •

edited

Loading