fix(emcn): stop the tab strip scrolling vertically by a pixel

The active tab extends one pixel past the strip so it covers the bottom border and
reads as joined to the panel below. That pixel came from `-mb-px` on the tab itself,
which meant it overflowed the row containing it — and that row is a scroll container,
because `overflow-x: auto` computes a visible `overflow-y` to `auto` as well. The strip
was therefore scrollable on the y axis by exactly one pixel, which is enough for a
trackpad to nudge the tabs out of view.

Moving the overlap onto the row keeps the tabs flush inside it, so the scroll container
has nothing to scroll, while the row itself still hangs the pixel over the border. The
strip is unchanged visually.

Measured in a real renderer with the component's own classes: the row was scrollHeight
30 against clientHeight 29, and is now 30 against 30. A first attempt to reproduce it
with hand-written inline styles showed no overflow at all — the real class output was
needed to see it.

Shared by the browser and terminal panels, so both stop scrolling.

Author: waleedlatif1

packages/emcn/src/components/tab-strip/tab-strip.test.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from 'node:fs'
 import { describe, expect, it } from 'vitest'
 import { isTabTitleTruncated, type TabStripItem, tabDropIndex } from './tab-strip'
 
@@ -78,3 +79,23 @@ describe('tab tooltips', () => {
     expect(tooltipFor(tab, false)).toBe('GitHub')
   })
 })
+
+describe('tab strip vertical overflow', () => {
+  const source = readFileSync(new URL('./tab-strip.tsx', import.meta.url), 'utf8')
+  /** Declarations only — the comments here discuss the class they removed. */
+  const markup = source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '')
+
+  it('keeps the one-pixel overlap off the horizontally scrolling row', () => {
+    // The active tab must extend a pixel past the strip to cover its bottom border. While
+    // that pixel came from the tab it overflowed the scroll container, and `overflow-x:
+    // auto` computes the visible `overflow-y` to `auto` too — so the strip scrolled
+    // vertically by exactly one pixel. Measured in a real renderer: the row was
+    // scrollHeight 30 against clientHeight 29, and is now 30 against 30.
+    const scrollRow = markup.match(/className='([^']*overflow-x-auto[^']*)'/)?.[1] ?? ''
+    expect(scrollRow).toContain('-mb-px')
+
+    const tabButton = markup.match(/className=\{cn\(\s*'(h-\[30px\][^']*)'/)?.[1] ?? ''
+    expect(tabButton).not.toBe('')
+    expect(tabButton).not.toContain('-mb-px')
+  })
+})

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

@@ -180,7 +180,7 @@ function Tab({
             aria-current={tab.active ? 'page' : undefined}
             aria-label={tab.pinned ? tab.title : undefined}
             className={cn(
-              '-mb-px h-[30px] w-full select-none rounded-b-none border border-transparent border-b-0 bg-transparent py-0 font-normal text-caption',
+              'h-[30px] w-full select-none rounded-b-none border border-transparent border-b-0 bg-transparent py-0 font-normal text-caption',
               tab.pinned ? 'justify-center px-0' : 'justify-start gap-1.5 px-2',
               closeable && !tab.pinned && 'pr-7',
               tab.active &&
@@ -317,8 +317,16 @@ export function TabStrip({
         and scrolls horizontally instead of growing, which pins the button back
         at the right edge rather than pushing it out of view.
       */}
+      {/*
+        `-mb-px` sits on this row rather than on the tabs inside it. The active tab has to
+        extend one pixel past the strip to cover its bottom border, and while that pixel
+        came from the tab it overflowed THIS element — which is a scroll container, since
+        `overflow-x: auto` computes the visible `overflow-y` to `auto` as well. The result
+        was a tab strip you could scroll vertically by exactly one pixel. Pulling the whole
+        row down instead keeps the tabs flush inside it, so there is nothing to scroll.
+      */}
       <div
-        className='flex min-w-0 shrink select-none items-end gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+        className='-mb-px flex min-w-0 shrink select-none items-end gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
         onDragOver={(event) => {
           if (draggedIdRef.current) event.preventDefault()
         }}