Redesign titlebar: window title, button sizing, offline indicator by shaunandrews · Pull Request #2675 · Automattic/studio

shaunandrews · 2026-02-26T15:46:01Z

Before

After

Summary

Remove "Howdy, {user}" text — Gravatar-only button with tooltip showing the user's name on hover. Cleaner, less cluttered.
Add centered window title — "Studio • {site name}" centered in the titlebar (macOS). "Studio" is dimmed/light, bullet is subtle, site name is full white. Falls back to just "Studio" when no site is selected.
Improve titlebar button sizing — All icon buttons (sidebar toggle, gravatar, settings, help) get consistent padding (p-1.5) and rounded-lg hover states. Sidebar toggle gets extra spacing from the traffic lights.
Reduce top/right padding — Removed redundant pt-1.5 from TopBar (chrome padding already handles it), reduced right padding so buttons sit closer to the window edge.
Refactor offline indicator — Changed from Button to span[role=status] since it's not interactive. Removes misleading hover state while keeping tooltip and accessibility attributes. Added fill-white for SVG visibility on dark chrome.
Add settings tooltip — Settings cog was missing a tooltip (pre-existing omission). Now shows "Settings" on hover.
Right-align right-side tooltips — Gravatar, settings, and help tooltips use bottom-end placement so they don't overshoot the window edge.

Test plan

🤖 Generated with Claude Code

…n sizing - Replace "Howdy, {user}" with Gravatar-only button (tooltip shows name) - Add centered "Studio • {site name}" window title - Add padding and rounded-lg to all titlebar icon buttons - Increase sidebar toggle spacing from traffic lights - Reduce top padding and right padding for better alignment Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The offline indicator isn't interactive — replace Button with a plain span[role=status] to remove misleading hover state while keeping the tooltip and accessibility attributes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

wpmobilebot · 2026-02-26T20:11:04Z

📊 Performance Test Results

Comparing aec6ff8 vs trunk

app-size

Metric	trunk	`aec6ff8`	Diff	Change
App Size (Mac)	1252.12 MB	1252.11 MB	0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	`aec6ff8`	Diff	Change
load	1923 ms	1580 ms	343 ms	🟢 -17.8%

site-startup

Metric	trunk	`aec6ff8`	Diff	Change
siteCreation	9190 ms	9174 ms	16 ms	⚪ 0.0%
siteStartup	4948 ms	4944 ms	4 ms	⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

wojtekn · 2026-03-23T15:55:07Z

@shaunandrews nice improvements! I merged the trunk into the branch and solved the conflict. Some notes:

Left padding for sidebar toggle looks too large in full-screen mode (when three MacOS buttons are gone)
Clicking on the user thumbnail could open Settings -> Account instead of General. However, I see it works that way in trunk, too, so maybe we broke it there at some point.
We need to check how those changes look on Windows - it would be great to add a Windows screenshot, too.

katinthehatsite

Nice work, thanks for making these improvements!

I noticed two small things. The padding looks slightly too large when it is full size screen (I see it was also mentioned by another reviewer):

I also noticed that when a site has a very long name, it looks a bit weird but not sure if it is a big issue. We can also leave as is or crop it shorter as an alternative:

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Match gravatar button dimensions to other toolbar buttons and add a subtle border to tooltips for better contrast against dark backgrounds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

shaunandrews · 2026-03-25T14:31:19Z

Thanks for the feedback, y'all. I finally got a Windows build and... it is indeed busted on Windows. I'm working on fixes now.

Move bottom padding from TopBar (shared) to MacTitlebar (platform-specific) so Windows titlebar content centers naturally. Increase Windows titlebar from 32px to 44px to match other Electron apps. Make WindowTitle height platform-aware. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…title and WP logo Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

shaunandrews · 2026-03-26T20:30:22Z

Been toying with this for a bit. After some more feedback, I removed the title (Studio • Site Title) as its duplicative in most scenarios, with the site title showing in the sidebar and the frame header. And on windows the Studio title is already shown, and the large window controls and menu element cause overlapping/truncation issues.

wojtekn · 2026-03-27T09:21:35Z

I tested it again, and it looks good. However, this label is confusing:

I understand that the intention is to explain why it's worth logging in, but with such short sentence, it is unclear. If we want to keep it there, it would make sense to make it more descriptive e.g. "Log in to benefit from Sync, Previews, and Assistant features." or similar.

wojtekn · 2026-03-27T11:08:30Z

Clicking on the user thumbnail could open Settings -> Account instead of General. However, I see it works that way in trunk, too, so maybe we broke it there at some point.

I fixed this in #2930, it was a regression introduced at some point.

shaunandrews · 2026-03-27T15:28:22Z

I understand that the intention is to explain why it's worth logging in, but with such short sentence, it is unclear. If we want to keep it there, it would make sense to make it more descriptive e.g. "Log in to benefit from Sync, Previews, and Assistant features." or similar.

Tooltips don't have to be sentences, and should rarely be more than a few words. I think the button's label ("WordPress.com Log In") and the tooltip ("Enable Sync and Previews") together provide enough context to explain the connection between logging in and these gated features.

FWIW I tried a few other options:

Log in to enable sync and previews
Login to enable more features
Enable more features
Sync and preview require login

Its also possible that we don't need a tooltip here; the login button itself is already fairly unambiguous, but I thought it might be helpful to try and explain why you might click to login.

wojtekn · 2026-03-30T09:11:43Z

@shaunandrews I think this tooltip starts to make sense as soon as we prepend it with "Log in to" to read "Log in to enable Sync and Previews," as you propose.

Without "Log in to", the tooltip describes a side effect (sync and previews) rather than the primary action (logging in).

shaunandrews · 2026-04-07T21:11:38Z

Without "Log in to", the tooltip describes a side effect

With "Log in to" the tooltip is too long.

If you feel strongly I'll remove it—I want to clean up some of these misaligned elements more than I want to add the tooltip—but with the surrounding context I think "Enable Sync and Previews" is good.

# Conflicts: # apps/studio/src/components/top-bar.tsx

shaunandrews · 2026-04-07T22:09:40Z

I guess we may have discrepancies with different plans now making the tooltip more complex. I'll just remove it for now.

wojtekn · 2026-04-08T10:41:42Z

@shaunandrews Maybe in the end, we don't need a tooltip for that link? It's not an icon, and is already descriptive.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

shaunandrews · 2026-04-08T15:10:14Z

I removed the tooltip for the login button, and updated the branch.

shaunandrews and others added 4 commits February 25, 2026 11:14

Update topbar test to match offline indicator role change

1512116

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add settings tooltip, align right-side tooltips to bottom-end

97c0ed4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

shaunandrews self-assigned this Feb 26, 2026

shaunandrews and others added 3 commits February 26, 2026 11:12

Fix prettier formatting in top-bar

fa357a2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge branch 'trunk' into update/title-bar-design

3b4712c

Merge branch 'trunk' into update/title-bar-design

2e3120a

shaunandrews marked this pull request as ready for review February 26, 2026 16:28

Merge branch 'trunk' into update/title-bar-design

2889eab

Merge branch 'trunk' into update/title-bar-design

1418f7b

katinthehatsite reviewed Mar 23, 2026

View reviewed changes

shaunandrews and others added 5 commits March 24, 2026 14:02

Remove extra titlebar padding in macOS fullscreen mode

e0db6d4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Truncate only the site name in the window title

2483eda

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Polish toolbar button sizing and tooltip visibility

8ccf3e8

Match gravatar button dimensions to other toolbar buttons and add a subtle border to tooltips for better contrast against dark backgrounds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Update mac-titlebar test for fullscreen padding removal

3189aab

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'trunk' into update/title-bar-design

7533964

shaunandrews and others added 4 commits March 25, 2026 12:51

Add test guard to isWindows() to prevent test crashes

277dbd9

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Mock isWindows in topbar test instead of hardcoding test guard

7cb1365

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Clean up titlebar: fix login focus state, add tooltip, remove window …

ee44bb9

…title and WP logo Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge remote-tracking branch 'origin/trunk' into update/title-bar-design

6baf77b

# Conflicts: # apps/studio/src/components/top-bar.tsx

Merge branch 'trunk' into update/title-bar-design

596788b

shaunandrews and others added 2 commits April 8, 2026 10:29

Remove tooltip from login button in top bar

d6ae4de

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge branch 'trunk' into update/title-bar-design

aec6ff8

wojtekn approved these changes Apr 9, 2026

View reviewed changes

wojtekn merged commit 148ca4a into trunk Apr 9, 2026
10 checks passed

wojtekn deleted the update/title-bar-design branch April 9, 2026 08:38

Conversation

shaunandrews commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before

After

Summary

Test plan

Uh oh!

wpmobilebot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Performance Test Results

app-size

site-editor

site-startup

Uh oh!

wojtekn commented Mar 23, 2026

Uh oh!

katinthehatsite left a comment

Choose a reason for hiding this comment

Uh oh!

shaunandrews commented Mar 25, 2026

Uh oh!

shaunandrews commented Mar 26, 2026

Uh oh!

wojtekn commented Mar 27, 2026

Uh oh!

wojtekn commented Mar 27, 2026

Uh oh!

shaunandrews commented Mar 27, 2026

Uh oh!

wojtekn commented Mar 30, 2026

Uh oh!

shaunandrews commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shaunandrews commented Apr 7, 2026

Uh oh!

wojtekn commented Apr 8, 2026

Uh oh!

shaunandrews commented Apr 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

shaunandrews commented Feb 26, 2026 •

edited

Loading

wpmobilebot commented Feb 26, 2026 •

edited

Loading

shaunandrews commented Apr 7, 2026 •

edited

Loading