From 8ef638af6f44a3493b810d04901faf9c6c15595f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Sat, 9 May 2026 21:04:40 -0400 Subject: [PATCH] Inline sidebar title with macOS traffic lights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Round 12 left the sidebar header at `pt(36)` so the title row landed two rows below the macOS traffic lights — the screenshot shows them stacked vertically instead of sharing a row. The design renders the dots and the workspace title side-by-side. Tighten the header's top inset to 8 px and reserve the first 68 px of the title row for the traffic lights via `TRAFFIC_LIGHT_RESERVE`. The title now sits inline with the dots and the workspace picker row follows underneath at the design's gap. --- crates/ely_app/src/shell/chrome/sidebar_header.rs | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/crates/ely_app/src/shell/chrome/sidebar_header.rs b/crates/ely_app/src/shell/chrome/sidebar_header.rs index 0d7eea8..d1c0473 100644 --- a/crates/ely_app/src/shell/chrome/sidebar_header.rs +++ b/crates/ely_app/src/shell/chrome/sidebar_header.rs @@ -25,7 +25,7 @@ pub(crate) fn render_sidebar_header( div() .flex() .flex_col() - .pt(px(36.0)) + .pt(px(8.0)) .px(px(10.0)) .pb(px(10.0)) .gap(px(8.0)) @@ -40,10 +40,15 @@ pub(crate) fn render_sidebar_header( fn render_title_row() -> AnyElement { div() + .h(px(20.0)) .flex() .items_center() .gap(px(4.0)) - .pl(px(6.0)) + // macOS draws the traffic lights at window (12, 14) — roughly the + // first 70 px of any sidebar that touches the window's left edge. + // Pad the title past that span so "ELY Browser ⌄" sits inline with + // the dots instead of stranded on a row of its own. + .pl(px(TRAFFIC_LIGHT_RESERVE)) .child( div() .text_size(px(12.5)) @@ -60,6 +65,12 @@ fn render_title_row() -> AnyElement { .into_any_element() } +/// Width reserved at the start of the sidebar's top row for the macOS +/// traffic lights. Three 12 px dots with 8 px gaps, plus 12 px from the +/// window left edge minus our 16 px shell inset, lands at ~62; we add +/// breathing room and call it 68. +const TRAFFIC_LIGHT_RESERVE: f32 = 68.0; + fn render_workspace_picker( active_space: Option<&Space>, picker_open: bool,