diff --git a/packages/app/src/screens/workspace/compact-workspace-header/tab-switcher.tsx b/packages/app/src/screens/workspace/compact-workspace-header/tab-switcher.tsx index 737e92b4c2..115acde191 100644 --- a/packages/app/src/screens/workspace/compact-workspace-header/tab-switcher.tsx +++ b/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 { 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); +}); diff --git a/packages/app/src/screens/workspace/workspace-tab-layout.ts b/packages/app/src/screens/workspace/workspace-tab-layout.ts index 137a6f7b7b..2a9ec47837 100644 --- a/packages/app/src/screens/workspace/workspace-tab-layout.ts +++ b/packages/app/src/screens/workspace/workspace-tab-layout.ts @@ -135,3 +135,7 @@ export function selectWorkspaceChrome(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;