fix(mobile): tab bar spans the screen on iOS before 26

apps/mobile/src/features/workspace/WorkspaceNativeTabs.ios.tsx

@@ -18,7 +18,11 @@ import {
   NativeWorkspaceTabActivityContext,
   WorkspaceSlotOptionsContext,
 } from "../../native/v5-workspace-context";
-import { useCompactWorkspaceTabs, useSystemWorkspaceTabBar } from "./useSystemWorkspaceTabBar";
+import {
+  useCompactWorkspaceTabs,
+  useFloatingWorkspaceTabs,
+  useSystemWorkspaceTabBar,
+} from "./useSystemWorkspaceTabBar";
 import { useControlTheme } from "../../components/ui/useControlTheme";
 import { useDeviceType } from "../../native/native-layout-metrics";
 import { WorkspaceSidebarTabs } from "./WorkspaceSidebarTabs";
@@ -80,7 +84,7 @@ export function WorkspaceNativeTabs(props: {
   const deviceType = useDeviceType();
   const compactTabs = useCompactWorkspaceTabs();
   const { layout, startNewTask } = useAdaptiveWorkspaceLayout();
-  const compactSidebarTabs = deviceType === "phone" || !layout.usesSplitView;
+  const floatingTabs = useFloatingWorkspaceTabs();
   const { width } = useWindowDimensions();
   const { colors } = useControlTheme();
   const selectedTab = workspace.state.selectedTab;
@@ -158,17 +162,17 @@ export function WorkspaceNativeTabs(props: {
             bottom: 0,
             // UIKit can shrink the sidebar to 280pt independently of its preferred width.
             width:
-              deviceType === "pad"
+              deviceType === "pad" && (floatingTabs || layout.usesSplitView)
                 ? Math.min(280, layout.listPaneWidth ?? width, width)
                 : (layout.listPaneWidth ?? width),
             height: 128,
           }}
         >
           <WorkspaceSidebarTabs
-            compact={compactSidebarTabs}
-            reserveComposeSpace={compactSidebarTabs}
+            compact={floatingTabs}
+            reserveComposeSpace={floatingTabs}
             onNewTask={
-              compactSidebarTabs && !workspace.settingsOpen && selectedTab === "threads"
+              floatingTabs && !workspace.settingsOpen && selectedTab === "threads"
                 ? startNewTask
                 : undefined
             }

apps/mobile/src/features/workspace/WorkspaceToolbar.ios.tsx

@@ -16,7 +16,7 @@ import {
 import { useHardwareKeyboardCommand } from "../keyboard/hardwareKeyboardCommands";
 import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
 import { useWorkspaceTabs } from "./WorkspaceTabsContext";
-import { useCompactWorkspaceTabs, useSidebarWorkspaceTabs } from "./useSystemWorkspaceTabBar";
+import { useFloatingWorkspaceTabs, useSidebarWorkspaceTabs } from "./useSystemWorkspaceTabBar";
 import { WorkspaceTabToolbarButtons } from "./WorkspaceSectionToolbar";
 
 const SEARCH_LABELS = {
@@ -33,7 +33,7 @@ export function WorkspaceToolbar(props: {
   const activeNewTask = useActiveNewTask();
   const deviceType = useDeviceType();
   const sidebarTabs = useSidebarWorkspaceTabs();
-  const compactTabs = useCompactWorkspaceTabs();
+  const floatingTabs = useFloatingWorkspaceTabs();
   const duoSearch = NATIVE_LIQUID_GLASS_SUPPORTED && isDuoDevice(deviceType);
   const bottomSearch = duoSearch && sidebarTabs !== "picker";
   // On the Duo, compose belongs to the threads tab, in the detail column's bar when unfolded.
@@ -45,7 +45,7 @@ export function WorkspaceToolbar(props: {
     activeNewTask === null;
   const tabActive = use(NativeWorkspaceTabActivityContext)?.active ?? true;
   const focused = useIsFocused();
-  const { panes, togglePrimarySidebar } = useAdaptiveWorkspaceLayout();
+  const { layout, panes, togglePrimarySidebar } = useAdaptiveWorkspaceLayout();
   const searchRef = useRef<SearchBarCommands>(null);
   // The Settings list takes the selected tab's place, so search follows it.
   const selectedTab = workspace.settingsOpen ? "settings" : workspace.state.selectedTab;
@@ -189,9 +189,9 @@ export function WorkspaceToolbar(props: {
           {composeButton}
           {selectedTab !== "threads" ||
           isDuoDevice(deviceType) ||
-          deviceType === "pad" ||
+          (deviceType === "pad" && layout.usesSplitView) ||
           sidebarTabs === "picker" ||
-          compactTabs ? null : (
+          floatingTabs ? null : (
             <Toolbar.Button
               accessibilityLabel="New chat"
               icon="square.and.pencil"

apps/mobile/src/features/workspace/useSystemWorkspaceTabBar.ts

@@ -1,5 +1,6 @@
 import { isDuoDevice } from "../../lib/device-type";
 import { Platform } from "react-native";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { useAdaptiveWorkspaceLayout } from "../layout/adaptive-workspace-context";
 import { useDeviceType, useNativeLayoutMetrics } from "../../native/native-layout-metrics";
 import { useWorkspaceTabs } from "./WorkspaceTabsContext";
@@ -37,6 +38,18 @@ export function useCompactWorkspaceTabs() {
   );
 }
 
+/** The workspace tab bar floats with compose beside it. Before iOS 26 UITabBar is opaque and
+ * full width, so it sits flush and compose stays in the header. */
+export function useFloatingWorkspaceTabs() {
+  const { layout } = useAdaptiveWorkspaceLayout();
+  const deviceType = useDeviceType();
+  const compactTabs = useCompactWorkspaceTabs();
+  return (
+    NATIVE_LIQUID_GLASS_SUPPORTED &&
+    (compactTabs || (deviceType === "pad" && !layout.usesSplitView))
+  );
+}
+
 export function useSystemWorkspaceTabBar() {
   const deviceType = useDeviceType();
   const { layout } = useAdaptiveWorkspaceLayout();