fix(tabs): keep touch sizing stable across activity changes

Author: waleedlatif1

apps/desktop/e2e/browser-chrome.spec.ts

@@ -194,6 +194,30 @@ mountBrowserChromeFixture(useBrowserPanelOcclusion);`,
               .evaluate((element) => element.getBoundingClientRect().width)
           )
           .toBeGreaterThanOrEqual(48)
+        const attentionItem = page.locator('[data-tab-strip-item="tab-1"]')
+        const indicator = attentionItem.locator('[data-row-action-indicator]')
+        const controls = attentionItem.locator('[data-row-action-controls]')
+        await expect(indicator).toBeVisible()
+        await expect(indicator).toHaveCSS('opacity', '1')
+        await expect(controls).toHaveCSS('opacity', '1')
+        await attentionItem.getByRole('button', { name: /^Close / }).click({ trial: true })
+        expect(
+          await attentionItem.evaluate((element) => {
+            const title = element.querySelector('[data-overflow-text]')?.getBoundingClientRect()
+            const indicator = element
+              .querySelector('[data-row-action-indicator]')
+              ?.getBoundingClientRect()
+            const close = element.querySelector('[aria-label^="Close "]')?.getBoundingClientRect()
+            return (
+              title &&
+              indicator &&
+              close &&
+              title.right <= indicator.left &&
+              indicator.right <= close.left &&
+              close.right <= element.getBoundingClientRect().right
+            )
+          })
+        ).toBe(true)
         await page.screenshot({ path: testInfo.outputPath('crowded-tabs-touch.png') })
         const beforeSelection = await attention.evaluate(
           (element: HTMLElement) => element.offsetWidth
@@ -203,6 +227,27 @@ mountBrowserChromeFixture(useBrowserPanelOcclusion);`,
         expect(await attention.evaluate((element: HTMLElement) => element.offsetWidth)).toBe(
           beforeSelection
         )
+        await page.locator('#toggle-activity').click()
+        expect(await attention.evaluate((element: HTMLElement) => element.offsetWidth)).toBe(
+          beforeSelection
+        )
+        await page.locator('#toggle-activity').click()
+        await page.locator('#medium-tabs').click()
+        await page.getByRole('tab').first().click()
+        const intrinsicWidth = await attention.evaluate(
+          (element: HTMLElement) => element.offsetWidth
+        )
+        expect(intrinsicWidth).toBeGreaterThan(144)
+        expect(intrinsicWidth).toBeLessThan(200)
+        await attention.click()
+        expect(await attention.evaluate((element: HTMLElement) => element.offsetWidth)).toBe(
+          intrinsicWidth
+        )
+        await page.locator('#toggle-activity').click()
+        expect(await attention.evaluate((element: HTMLElement) => element.offsetWidth)).toBe(
+          intrinsicWidth
+        )
+        await page.locator('#toggle-activity').click()
       } finally {
         await session.send('Emulation.setTouchEmulationEnabled', { enabled: false })
         await session.detach()

apps/desktop/e2e/fixtures/browser-chrome.tsx

@@ -46,7 +46,8 @@ function BrowserChromeFixture({ useOcclusion }: BrowserChromeFixtureProps) {
   const [activeTabId, setActiveTabId] = useState<string | null>(null)
   const [selected, setSelected] = useState('tab-0')
   const [tabCount, setTabCount] = useState(8)
-  const [shortTitles, setShortTitles] = useState(false)
+  const [titleLength, setTitleLength] = useState<'short' | 'medium' | 'long'>('long')
+  const [attention, setAttention] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const api = (globalThis as typeof globalThis & { simDesktop: SimDesktopApi }).simDesktop
   const { snapshot, snapshotLayer, onSnapshotError } = useOcclusion(
@@ -93,26 +94,43 @@ function BrowserChromeFixture({ useOcclusion }: BrowserChromeFixtureProps) {
           id='eight-tabs'
           onClick={() => {
             setTabCount(8)
-            setShortTitles(false)
+            setTitleLength('long')
           }}
         >
           Eight tabs
         </Button>
         <Button id='many-tabs' onClick={() => setTabCount(18)}>
           Many tabs
         </Button>
-        <Button id='short-tabs' onClick={() => setShortTitles(true)}>
+        <Button id='short-tabs' onClick={() => setTitleLength('short')}>
           Short titles
         </Button>
+        <Button
+          id='medium-tabs'
+          onClick={() => {
+            setTitleLength('medium')
+            setTabCount(4)
+          }}
+        >
+          Medium titles
+        </Button>
+        <Button id='toggle-activity' onClick={() => setAttention((value) => !value)}>
+          Toggle activity
+        </Button>
       </div>
       {error && <p role='alert'>{error}</p>}
       <TabStrip
         tabs={Array.from({ length: tabCount }, (_, index) => ({
           id: `tab-${index}`,
-          title: shortTitles ? 'A' : `Example resource ${index + 1} with a descriptive title`,
+          title:
+            titleLength === 'short'
+              ? 'A'
+              : titleLength === 'medium'
+                ? 'Medium title'
+                : `Example resource ${index + 1} with a descriptive title`,
           icon: <File className='size-[16px] shrink-0' />,
           active: selected === `tab-${index}`,
-          attention: index === 1,
+          attention: attention && index === 1,
         }))}
         variant='floating'
         onSelect={setSelected}

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

@@ -42,7 +42,9 @@ const TAB_TRANSITION = { duration: 0.1, ease: [0.2, 0, 0, 1] as const }
  * the available space. Their 112px minimum leaves 50px for the title beside a
  * 16px icon and visible close button, including OverflowText's fade. Keep the
  * same minimum in every interaction state so revealing actions never shifts
- * tabs beneath the pointer. Crowded rows then scroll.
+ * tabs beneath the pointer. Touch layouts reserve both action slots even when
+ * no activity indicator is present, so activity changes cannot resize tabs.
+ * Crowded rows then scroll.
  */
 const TAB_WIDTH: Record<TabStripVariant, string> = {
   attached: 'w-[156px] min-w-[96px] shrink',
@@ -356,8 +358,7 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
         tab.pinned ? 'justify-center px-0' : 'justify-start gap-1.5 px-2',
         closeable && 'pr-8',
         closeable &&
-          tab.attention &&
-          !tab.active &&
+          (variant === 'floating' || (tab.attention && !tab.active)) &&
           '[@media(any-pointer:coarse)]:pr-[62px] [@media(hover:none)]:pr-[62px]',
         TAB_SHAPE[variant],
         tab.selected && !tab.active && TAB_SELECTED[variant],
@@ -408,7 +409,6 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
         tab.pinned ? 'w-[34px] min-w-[34px] max-w-[34px] flex-none' : TAB_WIDTH[variant],
         variant === 'floating' &&
           closeable &&
-          tab.attention &&
           '[@media(any-pointer:coarse)]:min-w-36 [@media(hover:none)]:min-w-36',
         dragging && 'opacity-30'
       )}