Skip to content

fix(web): align sidebar logo with macOS traffic light buttons#586

Merged
t3dotgg merged 1 commit intopingdotgg:mainfrom
binbandit:fix/sidebar-logo-alignment
Mar 9, 2026
Merged

fix(web): align sidebar logo with macOS traffic light buttons#586
t3dotgg merged 1 commit intopingdotgg:mainfrom
binbandit:fix/sidebar-logo-alignment

Conversation

@binbandit
Copy link
Contributor

@binbandit binbandit commented Mar 9, 2026

Summary

Fixes the sidebar logo alignment in the Electron desktop app on macOS. The T3 wordmark was not vertically centered with the native window traffic light buttons — it sat ~2px too low and ~8px too close to the traffic lights.

Closes #564

Changes

  • Vertical alignment: Reduced wordmark container top margin from mt-2 (8px) to mt-1.5 (6px), shifting the logo up ~2px to better center with the traffic light buttons.
  • Horizontal clearance: Increased Electron SidebarHeader left padding from pl-[82px] to pl-[90px], adding 8px of breathing room from the traffic light buttons.
  • Update button alignment: Matched the desktop update button's top margin (mt-2mt-1.5) so it stays vertically aligned with the wordmark.

All three changes are scoped to apps/web/src/components/Sidebar.tsx. Only Tailwind class adjustments — no logic changes.

Before / After

Before After
Logo sits slightly below traffic light center, too close horizontally Logo vertically centered with traffic lights, proper horizontal clearance

Before
before
After
after

Testing

  • bun lint — 0 errors
  • bun typecheck — 0 errors
  • Verified visually in Electron desktop app on macOS

Adjust the Electron sidebar header to properly center the T3 wordmark
with the native window controls. The logo was sitting ~2px too low and
~8px too close to the traffic lights.

- Reduce wordmark container top margin from mt-2 (8px) to mt-1.5 (6px)
- Increase Electron header left padding from 82px to 90px for proper
  traffic light clearance
- Match the desktop update button margin to stay aligned

Closes pingdotgg#564
@coderabbitai
Copy link

coderabbitai bot commented Mar 9, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fd550a5e-7b1b-4bc9-9fe0-ad8b47854ece

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ 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

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

@t3dotgg t3dotgg merged commit a20815e into pingdotgg:main Mar 9, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix logo alignment

2 participants