diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx index f92e5d967..51a05b3f1 100644 --- a/packages/app/src/screens/workspace/workspace-screen.tsx +++ b/packages/app/src/screens/workspace/workspace-screen.tsx @@ -26,7 +26,6 @@ import { ChevronDown, Copy, Ellipsis, - EllipsisVertical, Globe, Import as ImportIcon, PanelRight, @@ -246,7 +245,6 @@ function buildWorkspaceFileLocation( const ThemedLoadingSpinner = withUnistyles(LoadingSpinner); const ThemedEllipsis = withUnistyles(Ellipsis); -const ThemedEllipsisVertical = withUnistyles(EllipsisVertical); const ThemedChevronDown = withUnistyles(ChevronDown); const ThemedCopy = withUnistyles(Copy); const ThemedRotateCw = withUnistyles(RotateCw); @@ -1045,18 +1043,16 @@ function HeaderMenuProfileItem({ ); } -function WorkspaceHeaderMenuTriggerIcon({ - hovered, - open, - isMobile, -}: { - hovered: boolean; - open: boolean; - isMobile: boolean; -}) { - const Icon = isMobile ? ThemedEllipsisVertical : ThemedEllipsis; +/** + * The compact header buttons draw at 32pt, under the 44pt touch minimum, and sit flush against + * each other — so the slop can only grow vertically. Widening it would put two buttons' slop over + * the same pixels, which is a worse miss than a small target. + */ +const COMPACT_HEADER_BUTTON_HIT_SLOP = { top: 8, bottom: 8 } as const; + +function WorkspaceHeaderMenuTriggerIcon({ hovered, open }: { hovered: boolean; open: boolean }) { const colorMapping = hovered || open ? foregroundColorMapping : mutedColorMapping; - return ; + return ; } function WorkspaceHeaderMenu({ @@ -1097,22 +1093,28 @@ function WorkspaceHeaderMenu({ const renderTriggerIcon = useCallback( ({ hovered, open }: { hovered: boolean; open: boolean }) => ( - + ), - [isMobile], + [], ); return ( - + {renderTriggerIcon} - +