From 699470f16b8e6e427b0a40bcfdd192fa96e1cb05 Mon Sep 17 00:00:00 2001 From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com> Date: Thu, 22 Oct 2026 17:55:29 +0530 Subject: [PATCH] fix(app): even out browser bar, panel tab, and header spacing --- .../src/session/session-identity-header.css | 10 ++---- packages/gui-extensions/src/browser/bar.css | 31 +++++++++++++++---- packages/gui-extensions/src/file/renderer.tsx | 1 - packages/gui-extensions/src/file/tabs.css | 12 ------- packages/ui/src/navigation/tabs/tabs.css | 7 ++--- 5 files changed, 30 insertions(+), 31 deletions(-) diff --git a/packages/app/src/session/session-identity-header.css b/packages/app/src/session/session-identity-header.css index 76723bcc446..cba60f85e49 100644 --- a/packages/app/src/session/session-identity-header.css +++ b/packages/app/src/session/session-identity-header.css @@ -34,17 +34,13 @@ padding-inline: 4px; } - .session-header-location [data-component="project-avatar-v2"] { - margin-inline-end: 2px; - } - - /* The avatar-only trigger sits 4px from its avatar and the row adds a 4px gap; the avatar's 2px margin counts too. */ + /* The avatar-only trigger sits 4px from its avatar on every side, and the row adds a 4px gap. */ .session-header-location > .session-header-separator { - --separator-before: 10px; + --separator-before: 8px; } .session-header-location > .session-header-separator:dir(rtl) { - --separator-before: 9px; + --separator-before: 7px; } /* The collapsed header reads avatar, separator, title; the names stay in the trigger's title and accessible name. */ diff --git a/packages/gui-extensions/src/browser/bar.css b/packages/gui-extensions/src/browser/bar.css index 0d889ee2391..41a4bd8ef08 100644 --- a/packages/gui-extensions/src/browser/bar.css +++ b/packages/gui-extensions/src/browser/bar.css @@ -11,7 +11,9 @@ padding-inline: 8px; border-radius: 6px; background-color: var(--v2-background-bg-layer-01); - box-shadow: inset 0 0 0 0.5px transparent; + outline: 1px solid transparent; + outline-offset: 0; + transition: outline-color 85ms ease-out; color: var(--v2-text-text-base); font-size: 13px; font-weight: 440; @@ -19,17 +21,19 @@ letter-spacing: -0.04px; cursor: text; + /* The site button keeps 4px on every side, and the address still starts 32px in. */ &[data-site] { - padding-inline-start: 6px; + gap: 8px; + padding-inline-start: 4px; } &:hover:not([data-editing]) { - background-image: linear-gradient(var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)); + background-color: var(--v2-background-bg-layer-02); } &[data-editing] { padding-inline-start: 8px; - box-shadow: inset 0 0 0 0.5px var(--v2-border-border-focus); + outline-color: var(--v2-border-border-focus); } /* A focused page address sits where it sat at rest, 32px in; typed text and the placeholder sit at 30px. */ @@ -132,17 +136,32 @@ } } - /* Page actions show on hover and while the field has focus. */ + /* Page actions show on hover and while the field has focus, 4px from the edge like the site button. */ [data-slot="browser-address-actions"] { display: none; flex: none; align-items: center; - gap: 8px; + gap: 4px; } &:is(:hover, :focus-within) [data-slot="browser-address-actions"] { display: flex; } + + &:is(:hover, :focus-within):has([data-slot="browser-address-actions"]) { + padding-inline-end: 4px; + } + + /* The hit area reaches the field's top and bottom edges and meets its neighbour halfway across the gap. */ + [data-slot="browser-address-actions"] [data-component="icon-button-v2"] { + position: relative; + + &::before { + content: ""; + position: absolute; + inset: -4px -2px; + } + } } /* Suggestions from the browsing history, under the address field. */ diff --git a/packages/gui-extensions/src/file/renderer.tsx b/packages/gui-extensions/src/file/renderer.tsx index 2d5fdf27801..3b45ca47fbb 100644 --- a/packages/gui-extensions/src/file/renderer.tsx +++ b/packages/gui-extensions/src/file/renderer.tsx @@ -274,7 +274,6 @@ const setup: Setup = (ctx) => { ), draggable: false, - closable: "hover", transient: true, group: GROUP, dom: { panel: TABPANEL }, diff --git a/packages/gui-extensions/src/file/tabs.css b/packages/gui-extensions/src/file/tabs.css index 676919ee4cd..815801bf61e 100644 --- a/packages/gui-extensions/src/file/tabs.css +++ b/packages/gui-extensions/src/file/tabs.css @@ -1,21 +1,9 @@ -/* File tabs and the Open file launcher: tighter close button, as the host strip styled them before extensions. */ -:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-list"] [data-slot="tabs-trigger-wrapper"]:is([data-value="file:open"], [data-value^="file:open:"], [data-value^="file://"]) -{ - gap: 8px; - padding-inline-end: 4px; -} - /* The pill's padding sets the file icon's inset; the trigger clips anything pulled past its edge. */ :root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-list"] [data-slot="tabs-trigger-wrapper"][data-value^="file://"] { padding-inline-start: 8px; } -:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-list"] [data-slot="tabs-trigger-wrapper"]:is([data-value="file:open"], [data-value^="file:open:"], [data-value^="file://"]) [data-slot="tabs-trigger-close-button"] -{ - margin-inline-start: 0; -} - /* The launcher reads as an action rather than a document, so its label stays muted while selected. */ :root body diff --git a/packages/ui/src/navigation/tabs/tabs.css b/packages/ui/src/navigation/tabs/tabs.css index c462128dfc6..efd1741371c 100644 --- a/packages/ui/src/navigation/tabs/tabs.css +++ b/packages/ui/src/navigation/tabs/tabs.css @@ -512,12 +512,9 @@ padding: 0 !important; } + /* The 20px close button sits 4px from the tab's end, as from its top and bottom. */ &:has([data-slot="tabs-trigger-close-button"]) { - padding-inline-end: 8px; - - [data-slot="tabs-trigger-close-button"] { - margin-inline-start: 2px; - } + padding-inline-end: 4px; } &:has([data-selected]) {