🤖 fix: keep mobile header pinned when keyboard opens

src/browser/App.tsx

@@ -635,7 +635,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="bg-bg-dark mobile-layout flex h-screen overflow-hidden">
+      <div className="bg-bg-dark mobile-layout flex h-full min-h-0 overflow-hidden">
         <LeftSidebar
           lastReadTimestamps={lastReadTimestamps}
           onToggleUnread={onToggleUnread}
@@ -644,10 +644,10 @@ function AppInner() {
           sortedWorkspacesByProject={sortedWorkspacesByProject}
           workspaceRecency={workspaceRecency}
         />
-        <div className="mobile-main-content flex min-w-0 flex-1 flex-col overflow-hidden">
+        <div className="mobile-main-content flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
           <WindowsToolchainBanner />
           <RosettaBanner />
-          <div className="mobile-layout flex flex-1 overflow-hidden">
+          <div className="mobile-layout flex min-h-0 flex-1 overflow-hidden">
             {selectedWorkspace ? (
               (() => {
                 const currentMetadata = workspaceMetadata.get(selectedWorkspace.workspaceId);

src/browser/components/ChatPane.tsx

@@ -509,7 +509,7 @@ export const ChatPane: React.FC<ChatPaneProps> = (props) => {
   return (
     <div
       ref={chatAreaRef}
-      className="flex min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
+      className="flex min-h-0 min-w-96 flex-1 flex-col [@media(max-width:768px)]:max-h-full [@media(max-width:768px)]:w-full [@media(max-width:768px)]:min-w-0"
     >
       <WorkspaceHeader
         workspaceId={workspaceId}
@@ -523,7 +523,7 @@ export const ChatPane: React.FC<ChatPaneProps> = (props) => {
         onOpenTerminal={onOpenTerminal}
       />
 
-      <div className="relative flex-1 overflow-hidden">
+      <div className="relative min-h-0 flex-1 overflow-hidden">
         <div
           ref={contentRef}
           onWheel={markUserInteraction}

src/browser/components/LeftSidebar.tsx

@@ -32,7 +32,7 @@ export function LeftSidebar(props: LeftSidebarProps) {
       {/* Sidebar */}
       <div
         className={cn(
-          "h-screen bg-sidebar border-r border-border flex flex-col shrink-0",
+          "h-full bg-sidebar border-r border-border flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-20",
           collapsed ? "w-5" : "w-72",
           "mobile-sidebar",

src/browser/components/LoadingScreen.tsx

@@ -1,6 +1,6 @@
 export function LoadingScreen() {
   return (
-    <div className="bg-bg-dark flex h-screen w-screen items-center justify-center">
+    <div className="bg-bg-dark flex h-full w-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <div className="border-border-light h-12 w-12 animate-spin rounded-full border-4 border-t-transparent" />
         <p className="text-text-secondary text-sm">Loading workspaces...</p>

src/browser/components/RightSidebar.tsx

@@ -126,12 +126,9 @@ const SidebarContainer: React.FC<SidebarContainerProps> = ({
   return (
     <div
       className={cn(
-        "bg-sidebar border-l border-border-light flex flex-col overflow-hidden flex-shrink-0",
+        "bg-sidebar border-l border-border-light flex flex-col overflow-hidden shrink-0",
         !isResizing && "transition-[width] duration-200",
         collapsed && "sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]",
-        // Mobile: Show vertical meter when collapsed (20px), full width when expanded
-        "max-md:border-l-0 max-md:border-t max-md:border-border-light",
-        !collapsed && "max-md:w-full max-md:relative max-md:max-h-[50vh]",
         // In desktop mode, hide the left border when collapsed to avoid
         // visual separation in the titlebar area (overlay buttons zone)
         isDesktop && collapsed && "border-l-0"

src/browser/components/WorkspaceHeader.tsx

@@ -111,7 +111,7 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
       style={headerRightPadding > 0 ? { paddingRight: headerRightPadding } : undefined}
       data-testid="workspace-header"
       className={cn(
-        "bg-sidebar border-border-light flex items-center justify-between border-b px-[15px] [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2",
+        "bg-sidebar border-border-light flex items-center justify-between border-b px-[15px] [@media(max-width:768px)]:sticky [@media(max-width:768px)]:top-0 [@media(max-width:768px)]:z-10 [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pt-[calc(env(safe-area-inset-top,0px)+0.5rem)]",
         isDesktop ? DESKTOP_TITLEBAR_HEIGHT_CLASS : "h-8",
         // In desktop mode, make header draggable for window movement
         isDesktop && "titlebar-drag"

src/browser/components/WorkspaceShell.tsx

@@ -32,7 +32,7 @@ const WorkspacePlaceholder: React.FC<{
 }> = (props) => (
   <div
     className={cn(
-      "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+      "flex flex-1 min-h-0 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
       props.className
     )}
     style={{ containerType: "inline-size" }}
@@ -88,7 +88,7 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 min-h-0 flex-row bg-dark text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         props.className
       )}
       style={{ containerType: "inline-size" }}
@@ -107,18 +107,20 @@ export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
         onOpenTerminal={handleOpenTerminal}
       />
 
-      <RightSidebar
-        key={props.workspaceId}
-        workspaceId={props.workspaceId}
-        workspacePath={props.namedWorkspacePath}
-        projectPath={props.projectPath}
-        width={sidebarWidth}
-        onStartResize={startResize}
-        isResizing={isResizing}
-        onReviewNote={handleReviewNote}
-        isCreating={props.status === "creating"}
-        addTerminalRef={addTerminalRef}
-      />
+      <div className="shrink-0 [@media(max-width:768px)]:hidden">
+        <RightSidebar
+          key={props.workspaceId}
+          workspaceId={props.workspaceId}
+          workspacePath={props.namedWorkspacePath}
+          projectPath={props.projectPath}
+          width={sidebarWidth}
+          onStartResize={startResize}
+          isResizing={isResizing}
+          onReviewNote={handleReviewNote}
+          isCreating={props.status === "creating"}
+          addTerminalRef={addTerminalRef}
+        />
+      </div>
 
       <PopoverError
         error={backgroundBashError.error}