fix: align iPad PWA window controls spacing

Adds tablet standalone PWA detection
Aligns header and sidebar action padding
Extends safe-area handling for tablet PWAs

packages/ui/src/components/layout/Header.tsx

@@ -1401,14 +1401,14 @@ export const Header: React.FC<HeaderProps> = ({
     }
 
     return {
-      paddingLeft: isTabletStandalonePwa
+      paddingLeft: isTabletStandalonePwa && !isSidebarOpen
         ? 'max(calc(0.75rem + var(--oc-wco-left-inset, 0px)), 5.5rem)'
         : 'calc(0.75rem + var(--oc-wco-left-inset, 0px))',
       paddingRight: 'calc(0.75rem + var(--oc-wco-right-inset, 0px))',
       minHeight: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
       height: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
     };
-  }, [isDesktopApp, isTabletStandalonePwa, isVSCode]);
+  }, [isDesktopApp, isSidebarOpen, isTabletStandalonePwa, isVSCode]);
 
   const updateHeaderHeight = React.useCallback(() => {
     if (typeof document === 'undefined') {

packages/ui/src/components/layout/RightSidebar.tsx

@@ -3,6 +3,7 @@ import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/useUIStore';
 import { useI18n } from '@/lib/i18n';
 import { isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag } from '@/lib/desktop';
+import { useTabletStandalonePwaRuntime } from '@/lib/device';
 
 export const RIGHT_SIDEBAR_CONTENT_WIDTH = 420;
 const RIGHT_SIDEBAR_MIN_WIDTH = 400;
@@ -21,6 +22,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
   const setRightSidebarWidth = useUIStore((state) => state.setRightSidebarWidth);
   const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
   const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
+  const isTabletStandalonePwa = useTabletStandalonePwaRuntime();
   const [isResizing, setIsResizing] = React.useState(false);
   const startXRef = React.useRef(0);
   const startWidthRef = React.useRef(rightSidebarWidth || 420);
@@ -137,8 +139,9 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
     return {
       paddingLeft: 'calc(0.75rem + var(--oc-wco-left-inset, 0px))',
       paddingRight: 'calc(0.75rem + var(--oc-wco-right-inset, 0px))',
+      ...(isTabletStandalonePwa ? { paddingTop: 'var(--oc-safe-area-top, 0px)' } : null),
     };
-  }, [isDesktopApp, isVSCode]);
+  }, [isDesktopApp, isTabletStandalonePwa, isVSCode]);
 
   return (
     <aside
@@ -162,7 +165,10 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
       {isOpen ? (
         <div
           onMouseDown={handleDragStart}
-          className="app-region-drag absolute inset-x-0 top-0 z-20 flex h-[var(--oc-header-height,56px)] items-center justify-end px-3"
+          className={cn(
+            'app-region-drag absolute inset-x-0 top-0 z-20 flex items-center justify-end px-3',
+            'h-[var(--oc-header-height,56px)]',
+          )}
           style={webWindowControlsOverlayStyle}
           aria-hidden
         >

packages/ui/src/components/session/sidebar/SidebarHeader.tsx

@@ -94,12 +94,17 @@ export function SidebarHeader(props: Props): React.ReactNode {
         'select-none flex-shrink-0',
         showSidebarToggle ? (avoidWindowControlsOverlay ? 'pl-[5.5rem] pr-3' : 'pl-3 pr-3') : 'px-2.5 py-1',
       )}
+      style={showSidebarToggle && avoidWindowControlsOverlay ? { paddingTop: 'var(--oc-safe-area-top, 0px)' } : undefined}
     >
       {reserveHeaderActionsSpace ? (
         <div
           className={cn(
             'flex h-auto flex-col gap-1',
-            showSidebarToggle ? 'min-h-[var(--oc-header-height,56px)] justify-center' : 'min-h-8',
+            showSidebarToggle
+              ? avoidWindowControlsOverlay
+                ? 'min-h-[calc(var(--oc-header-height,56px)-var(--oc-safe-area-top,0px))] justify-center'
+                : 'min-h-[var(--oc-header-height,56px)] justify-center'
+              : 'min-h-8',
           )}
         >
           <div className="flex h-8 items-center justify-between gap-2">