fix(app): reserve readable width for the compact tab popover

Native scroll content does not contribute intrinsic width to the anchored frame. The count badge alone allowed the popover to compress its tab list and footer labels.

Co-authored-by: Elsa Granger <zeyugao@outlook.com>

packages/app/src/screens/workspace/compact-workspace-header/tab-switcher.tsx

@@ -1,3 +1,4 @@
+import { workspaceTabSwitcherPopoverLayout } from "../workspace-tab-layout";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { Keyboard, Pressable, Text, View } from "react-native";
 import { useTranslation } from "react-i18next";
@@ -456,6 +457,7 @@ export const MobileWorkspaceTabSwitcher = memo(function MobileWorkspaceTabSwitch
       </Pressable>
 
       <Combobox
+        {...workspaceTabSwitcherPopoverLayout}
         options={tabSwitcherOptions}
         value={activeTabKey}
         onSelect={onSelectSwitcherTab}

packages/app/src/screens/workspace/workspace-tab-layout.test.ts

@@ -1,3 +1,4 @@
+import { buildDesktopFrameStyle } from "@/components/ui/combobox-frame-style";
 import {
   WorkspaceHeaderExplorerToggle,
   WorkspaceExplorerSidebarToggle,
@@ -7,6 +8,7 @@ import { SidebarCloseButton } from "@/components/headers/sidebar-close-button";
 import { resolveWorkspaceTabChipBackdrop } from "@/screens/workspace/workspace-tab-chip-backdrop";
 import { darkPureBlackTheme, darkTheme, lightTheme } from "@/styles/theme";
 import {
+  workspaceTabSwitcherPopoverLayout,
   selectWorkspaceChrome,
   computeWorkspaceTabLayout,
   retainWorkspaceTabMeasuredWidth,
@@ -278,3 +280,16 @@ describe("desktop pane chrome", () => {
     expect(selectWorkspaceChrome({ width: null, compact: "pane dropdown", full })).toBe(full);
   });
 });
+
+it("gives the tab switcher a readable popover width independent of its 16pt count badge", () => {
+  const frame = buildDesktopFrameStyle({
+    desktopMinWidth: workspaceTabSwitcherPopoverLayout.desktopMinWidth,
+    desktopLockWidth: false,
+    referenceWidth: 16,
+    desktopFixedHeight: undefined,
+    desktopPositionStyle: {},
+    shouldHideDesktopContent: false,
+    availableHeight: 600,
+  }) as Array<{ minWidth?: number }>;
+  expect(frame[0].minWidth).toBeGreaterThanOrEqual(320);
+});

packages/app/src/screens/workspace/workspace-tab-layout.ts

@@ -135,3 +135,7 @@ export function selectWorkspaceChrome<Compact, Full>(input: {
   const compact = input.width !== null && shouldUseCompactWorkspaceHeader(input.width);
   return compact ? input.compact : input.full;
 }
+
+// A count badge is only 16pt wide. Native popovers need a content width floor
+// because their scrolling tab list does not contribute an intrinsic width.
+export const workspaceTabSwitcherPopoverLayout = { desktopMinWidth: 320 } as const;