fix(app): even out browser bar, panel tab, and header spacing

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. */

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. */

packages/gui-extensions/src/file/renderer.tsx

@@ -274,7 +274,6 @@ const setup: Setup<typeof File> = (ctx) => {
       </div>
     ),
     draggable: false,
-    closable: "hover",
     transient: true,
     group: GROUP,
     dom: { panel: TABPANEL },

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

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]) {