improvement(tabs): restore the header height and clear the scroll fades

Selecting a partly-hidden tab scrolled it flush against the container edge,
which is exactly where the fade gradient sits, so it arrived half-faded and
still looked cut off. Reveal now insets by the fade width and clamps at the
scroll extremes, where no gradient is drawn.

The header also went back to its pre-port 43px: the port had taken it to 34px
while growing the tabs to 30px, leaving about a pixel and a half of air instead
of ten. Floating tabs cap at 160px so no single tab dominates the row.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts

@@ -10,16 +10,21 @@ export const RESOURCE_TAB_ICON_CLASS = 'size-[16px] text-[var(--text-icon)]'
 /** Shared geometry for the resource header and controls positioned over it. */
 export const RESOURCE_HEADER_CLASSES = {
   layout:
-    '[--resource-header-controls-height:34px] [--resource-header-end-inset:16px] [--resource-header-fixed-reserve:54px] [--resource-header-toggle-size:30px]',
+    '[--resource-header-controls-height:43px] [--resource-header-end-inset:16px] [--resource-header-fixed-reserve:54px] [--resource-header-toggle-size:30px]',
   /**
    * Drives the tab strip from this header's own tokens rather than restating the
    * strip's defaults, so the height the overlaid controls below are positioned
    * against and the height the strip renders at cannot drift apart. Set on the
    * strip itself, not an ancestor — the browser and terminal strips nested in
    * this panel keep their own geometry.
+   *
+   * The `+ 1px` is the strip's own bottom border. The controls height is the
+   * CONTENT box both clusters centre in, so the strip's box has to be a pixel
+   * taller than it or the tabs would centre in 43px while the overlaid toggle
+   * centres in 44px, and the two rows would sit half a pixel apart.
    */
   stripGeometry:
-    '[--tab-strip-height:var(--resource-header-controls-height)] [--tab-strip-inline-start:var(--resource-header-end-inset)] [--tab-strip-inline-end:var(--resource-header-fixed-reserve)]',
+    '[--tab-strip-height:calc(var(--resource-header-controls-height)_+_1px)] [--tab-strip-max-tab-width:160px] [--tab-strip-inline-start:var(--resource-header-end-inset)] [--tab-strip-inline-end:var(--resource-header-fixed-reserve)]',
   /**
    * Centred, matching the `floating` strip: its tabs and controls sit centred in
    * the header band rather than hanging from the top, so an overlaid control has

packages/emcn/src/components/tab-strip/tab-strip.dom.test.tsx

@@ -351,6 +351,29 @@ describe('TabStrip interactions', () => {
 
     act(() => root?.render(renderStrip(tabs.map((tab) => ({ ...tab, active: tab.id === 'two' })))))
 
-    expect(row.scrollTo).toHaveBeenCalledWith({ left: 180, behavior: 'smooth' })
+    // 280 - 100 would park the tab's right edge flush with the container's,
+    // which is exactly where the fade gradient sits — the tab would arrive
+    // half-faded. The extra 16px carries it clear of the gradient.
+    expect(row.scrollTo).toHaveBeenCalledWith({ left: 196, behavior: 'smooth' })
+  })
+
+  it('lets the last tab rest flush, since no gradient is drawn at a scroll extreme', () => {
+    mount(renderStrip(tabs))
+    const row = scrollRow()
+    Object.defineProperties(row, {
+      clientWidth: { configurable: true, value: 100 },
+      scrollWidth: { configurable: true, value: 300 },
+      scrollLeft: { configurable: true, value: 0, writable: true },
+    })
+    row.getBoundingClientRect = () => ({ left: 0, right: 100, width: 100 }) as DOMRect
+    const last = tabButton('two').parentElement as HTMLDivElement
+    // Flush against the end of the scrollable area.
+    last.getBoundingClientRect = () => ({ left: 200, right: 300, width: 100 }) as DOMRect
+    row.scrollTo = vi.fn()
+
+    act(() => root?.render(renderStrip(tabs.map((tab) => ({ ...tab, active: tab.id === 'two' })))))
+
+    // Wants 216; clamped to the 200 maximum rather than over-scrolling.
+    expect(row.scrollTo).toHaveBeenCalledWith({ left: 200, behavior: 'smooth' })
   })
 })

packages/emcn/src/components/tab-strip/tab-strip.tsx

@@ -22,6 +22,13 @@ import { Tooltip } from '../tooltip/tooltip'
 const DRAG_EDGE_ZONE = 40
 const DRAG_SCROLL_SPEED = 8
 const TITLE_TOOLTIP_HIDDEN_PX = 8
+/**
+ * Width of the scroll-edge fades, and so the margin a tab has to clear to be
+ * genuinely visible. Keep in step with the `w-4` on the gradients below: a tab
+ * revealed flush against the container edge lands under its gradient and reads
+ * as half-faded, which is indistinguishable from "there is more to scroll".
+ */
+const EDGE_FADE_PX = 16
 const TAB_TRANSITION = { duration: 0.1, ease: [0.2, 0, 0, 1] as const }
 
 /**
@@ -42,7 +49,7 @@ const TAB_TRANSITION = { duration: 0.1, ease: [0.2, 0, 0, 1] as const }
  */
 const TAB_WIDTH: Record<TabStripVariant, string> = {
   attached: 'w-[156px] min-w-[96px] shrink',
-  floating: 'max-w-[200px] shrink-0',
+  floating: 'max-w-[var(--tab-strip-max-tab-width,200px)] shrink-0',
 }
 
 /** The resting shape of a tab that is not the active one. */
@@ -223,6 +230,8 @@ interface TabStripBaseProps {
    * - `--tab-strip-band` (default `30px`) — the height of the tabs and the
    *   controls beside them, which is the band an overlaid control must match.
    * - `--tab-strip-inline-start` / `--tab-strip-inline-end` (default `8px`).
+   * - `--tab-strip-max-tab-width` (default `200px`) — the width a `floating`
+   *   tab's label ellipsizes at. `attached` is fixed-width and ignores it.
    */
   className?: string
 }
@@ -537,13 +546,22 @@ export function TabStrip({
     const nodeRect = node.getBoundingClientRect()
     const tabLeft = tabRect.left - nodeRect.left + node.scrollLeft
     const tabRight = tabLeft + tabRect.width
-    const nextLeft =
-      tabLeft < node.scrollLeft
-        ? tabLeft
-        : tabRight > node.scrollLeft + node.clientWidth
-          ? tabRight - node.clientWidth
+    // Inset by the fade on both sides so the tab comes to rest clear of the
+    // gradient rather than beneath it.
+    const viewLeft = node.scrollLeft + EDGE_FADE_PX
+    const viewRight = node.scrollLeft + node.clientWidth - EDGE_FADE_PX
+    const maxScrollLeft = Math.max(0, node.scrollWidth - node.clientWidth)
+    const target =
+      tabLeft < viewLeft
+        ? tabLeft - EDGE_FADE_PX
+        : tabRight > viewRight
+          ? tabRight - node.clientWidth + EDGE_FADE_PX
           : null
-    if (nextLeft === null) return
+    if (target === null) return
+    // The clamp is what lets the first and last tabs sit flush: there is no
+    // gradient at a scroll extreme, so no margin is needed to clear one.
+    const nextLeft = Math.max(0, Math.min(maxScrollLeft, target))
+    if (Math.abs(nextLeft - node.scrollLeft) < 1) return
     const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
     node.scrollTo({ left: nextLeft, behavior: reduceMotion ? 'auto' : 'smooth' })
   }, [activeRegularId, regularTabOrder])
@@ -846,6 +864,7 @@ export function TabStrip({
             </AnimatePresence>
           </div>
           {canScrollLeft && (
+            /* w-4 — see EDGE_FADE_PX */
             <div className='pointer-events-none absolute inset-y-0 left-0 z-20 w-4 bg-gradient-to-r from-[var(--bg)] to-transparent' />
           )}
           {canScrollRight && (