fix: align workspace tab bar spacing with Chrome tab strip metrics by jeanfbrito · Pull Request #3419 · RocketChat/Rocket.Chat.Electron · GitHub

What

Polish pass on the workspace tab bar (follow-up to #3394 / #3413) matching macOS Chrome's tab strip metrics, measured from a side-by-side screenshot at 2x:

Metric (CSS px)	Chrome	Before	After
Padding above tab	~5-6	4	6 (strip 36 → 38)
Traffic light inset / vertical center	12 / ~19	16 / 17	12 / 19 (x:12 y:13)
Green light → first tab gap	~19.5	~12	~20 (spacer 78 → 82, list padding-left 4 → 8)

Also makes the AddServerView background use --rcx-color-surface-tint (same token as the tab strip) instead of the sidebar surface, so the "add new server" screen blends with the tab bar.

Why

The strip read as cramped next to Chrome: tabs almost touching the window top edge and the traffic lights sitting too close to the first tab.

How to test

macOS, tabs navigation layout:

Open the app next to a Chrome window and compare the tab strip: space above tabs, traffic light position, and gap between the green light and the first tab.
Toggle fullscreen — tabs slide to the left edge (spacer collapses) with an 8px lead-in.
Click + (or remove all servers) — the add-server screen background matches the tab strip color in light and dark themes.

tsc --noEmit passes; spacing-only diff (6 lines).

Summary by CodeRabbit

Style
- Refined the tab bar layout with improved spacing and height.
- Adjusted macOS window control positioning for a more consistent appearance.
- Updated the server view background styling to use the latest surface tint.

Measured against Chrome's macOS tab strip at 2x and matched the metrics: - Strip height 36px -> 38px, giving 6px above the 32px tabs (Chrome ~5-6px) - Traffic lights moved to x:12 y:13 (Chrome inset 12, vertically centered in the 38px strip) in both the BrowserWindow option and the navigationLayout watcher - TrafficLightSpacer 78px -> 82px and TabList padding-left 4px -> 8px so the gap between the green light and the first tab lands at ~20px (Chrome ~19.5px) - AddServerView background now uses --rcx-color-surface-tint to match the tab strip background instead of the sidebar surface

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info ⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 63a62fec-3707-4a11-a343-fbfd04bf8fe4

📥 Commits

Reviewing files that changed from the base of the PR and between af6af9c and 0a5a9a5.

📒 Files selected for processing (3)

src/ui/components/AddServerView/styles.tsx
src/ui/components/TabBar/styles.tsx
src/ui/main/rootWindow.ts

📜 Recent review details ⏰ Context from checks skipped due to timeout. (3)

GitHub Check: check (macos-latest)
GitHub Check: check (ubuntu-latest)
GitHub Check: check (windows-latest)

🧰 Additional context used 📓 Path-based instructions (2) **/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for new code unless explicitly told otherwise.
Use Fuselage components from @rocket.chat/fuselage for UI work unless the design requires something Fuselage does not provide.
Check Theme.d.ts for valid color tokens before using Fuselage colors.
Verify library props, APIs, and tokens against official docs or local .d.ts files instead of assuming.
Use React functional components with hooks.
Redux actions follow FSA shape.
Use camelCase for file names and PascalCase for components.
Prefer clear names over unnecessary comments.
Prefer editing existing files over creating new abstractions unless the new abstraction removes real complexity or matches an existing pattern.

**/*.{ts,tsx}: Use TypeScript for all new code unless explicitly told otherwise.
Use Fuselage components for all UI work; create custom components only when Fuselage lacks the required functionality.
Import Fuselage components from @rocket.chat/fuselage.
Use only valid color tokens documented by Theme.d.ts.
Use optional chaining with fallbacks for platform-specific APIs, especially Linux-only process APIs such as process.getuid(), getgid(), geteuid(), and getegid().
Use TypeScript strict mode.
Redux actions must follow the Flux Standard Action pattern.
Use camelCase for file names and PascalCase for component names.
Avoid unnecessary comments; prefer self-documenting code through clear naming.
Do not commit or push without explicit user permission.
Verify library APIs, props, tokens, and types against official documentation and .d.ts files instead of assuming they are valid.

Files:

src/ui/components/AddServerView/styles.tsx
src/ui/components/TabBar/styles.tsx
src/ui/main/rootWindow.ts

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Use React functional components with hooks.

Files:

src/ui/components/AddServerView/styles.tsx
src/ui/components/TabBar/styles.tsx

🔇 Additional comments (3)

src/ui/components/TabBar/styles.tsx (1)

15-15: LGTM!

Also applies to: 30-30, 42-42

src/ui/main/rootWindow.ts (1)

113-113: LGTM!

Also applies to: 358-358

src/ui/components/AddServerView/styles.tsx (1)

9-9: LGTM!

Walkthrough

Updated the macOS tabs layout geometry, including traffic light placement and tab bar spacing. Changed the Add Server wrapper to use the surface tint color token.

Changes

UI layout and styling

Layer / File(s)	Summary
Tab navigation geometry src/ui/components/TabBar/styles.tsx, src/ui/main/rootWindow.ts	The tab strip height, traffic light spacer width, and tab list padding were increased. macOS traffic light coordinates now use { x: 12, y: 13 } during window creation and tabs-layout updates.
Add Server surface color src/ui/components/AddServerView/styles.tsx	The wrapper background now references --rcx-color-surface-tint while retaining the #2f343d fallback.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

RocketChat/Rocket.Chat.Electron#3394: Adjusts related tabs UI sizing and traffic light placement.
RocketChat/Rocket.Chat.Electron#3413: Overlaps with the TabBar sizing and root window placement changes.
RocketChat/Rocket.Chat.Electron#3418: Modifies the traffic light spacer width and tab strip spacing.

Suggested labels: type: chore

🚥 Pre-merge checks | ✅ 5 ✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main UI spacing adjustment to match Chrome’s tab strip metrics.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

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.

jeanfbrito added the build-artifacts label Jul 16, 2026

coderabbitai Bot added the type: chore label Jul 16, 2026

jeanfbrito merged commit 713204c into master Jul 16, 2026
9 checks passed

jeanfbrito deleted the fix/tab-bar-chrome-parity-spacing branch July 16, 2026 19:29

coderabbitai Bot mentioned this pull request Jul 17, 2026

fix: theme-aware tab strip, tooltip address line, and divider polish #3422

Closed

jeanfbrito mentioned this pull request Aug 3, 2026

chore: bump version to 4.16.0-alpha.2 #3432

Merged

coderabbitai Bot mentioned this pull request Aug 9, 2026

docs: desktop UI guidelines and dev-app-verify skill #3445

Merged

jeanfbrito mentioned this pull request Aug 28, 2026

fix: restore breathing room between traffic lights and first tab (CORE-2312) #3418

Closed

fix: align workspace tab bar spacing with Chrome tab strip metrics by jeanfbrito · Pull Request #3419 · RocketChat/Rocket.Chat.Electron · GitHub

Uh oh!

fix: align workspace tab bar spacing with Chrome tab strip metrics - #3419

fix: align workspace tab bar spacing with Chrome tab strip metrics#3419
jeanfbrito merged 1 commit into
masterfrom
fix/tab-bar-chrome-parity-spacing

jeanfbrito commented Jul 16, 2026 •
edited by coderabbitai Bot
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 16, 2026 •
edited
Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix: align workspace tab bar spacing with Chrome tab strip metrics by jeanfbrito · Pull Request #3419 · RocketChat/Rocket.Chat.Electron · GitHub

Uh oh!

fix: align workspace tab bar spacing with Chrome tab strip metrics - #3419

fix: align workspace tab bar spacing with Chrome tab strip metrics#3419jeanfbrito merged 1 commit intomasterRocketChat/Rocket.Chat.Electron:masterfrom fix/tab-bar-chrome-parity-spacingRocketChat/Rocket.Chat.Electron:fix/tab-bar-chrome-parity-spacingCopy head branch name to clipboard

Conversation

jeanfbrito commented Jul 16, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How to test

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix: align workspace tab bar spacing with Chrome tab strip metrics#3419
jeanfbrito merged 1 commit into
masterfrom
fix/tab-bar-chrome-parity-spacing

jeanfbrito commented Jul 16, 2026 •
edited by coderabbitai Bot
Loading

coderabbitai Bot commented Jul 16, 2026 •
edited
Loading