🤖 fix: show the branch in the phone footer again

src/browser/components/ChatPane/WorkspaceFooterBar.test.tsx

@@ -578,10 +578,10 @@ describe("WorkspaceFooterBar at narrow viewports", () => {
     cleanupDom = null;
   });
 
-  it("drops the branch, drift label, usage stats and last prompt but keeps the repo label", () => {
+  it("drops the drift label, usage stats and last prompt but keeps the repo label and branch", () => {
     const { container, queryByTestId } = renderFooter();
 
-    expect(BranchSelectorModule.BranchSelector).not.toHaveBeenCalled();
+    expect(BranchSelectorModule.BranchSelector).toHaveBeenCalled();
     expect(container.textContent).not.toContain("Lines");
     expect(container.textContent).not.toContain("tok");
     expect(container.textContent).not.toContain("t/s");
@@ -601,15 +601,13 @@ describe("WorkspaceFooterBar at narrow viewports", () => {
 
   it("makes the diff numbers toggle the drift mode until the viewport widens", () => {
     const { container } = renderFooter();
-    expect(BranchSelectorModule.BranchSelector).not.toHaveBeenCalled();
     expect(lastGitStatusIndicatorProps()?.tapTogglesMode).toBe(true);
 
     viewportIsNarrow = false;
     act(() => {
       for (const listener of viewportListeners) listener();
     });
 
-    expect(BranchSelectorModule.BranchSelector).toHaveBeenCalled();
     expect(container.textContent).toContain("Lines");
     expect(lastGitStatusIndicatorProps()?.tapTogglesMode).toBe(false);
   });

src/browser/components/ChatPane/WorkspaceFooterBar.tsx

@@ -146,21 +146,16 @@ function WorkspaceBranchControls(props: {
   devcontainerChip: DevcontainerChip;
   isNarrow: boolean;
 }) {
-  // Phones show the branch in the header's workspace details instead, keeping only the
-  // devcontainer chip because it reports live runtime state.
-  if (props.isNarrow) {
-    return props.devcontainerChip && <FooterDevcontainerChip chip={props.devcontainerChip} />;
-  }
-
-  // The branch is the one footer item that can shrink (its name truncates with an ellipsis), so a
-  // long name no longer pushes the row wider than a phone screen (#5769).
+  // The branch truncates rather than push the row past a phone screen (#5769). Phones give it only
+  // the width the other items leave, so a short repo label stays whole, and drop the wrapper so the
+  // devcontainer chip keeps its full width.
   return (
-    <div className="flex min-w-0 items-center gap-1">
+    <div className={props.isNarrow ? "contents" : "flex min-w-0 items-center gap-1"}>
       <BranchSelector
         key={props.workspaceId}
         workspaceId={props.workspaceId}
         workspaceName={props.workspaceName}
-        className="min-w-0"
+        className={props.isNarrow ? "max-w-max min-w-0 grow basis-0 overflow-hidden" : "min-w-0"}
       />
       {props.devcontainerChip && <FooterDevcontainerChip chip={props.devcontainerChip} />}
     </div>
@@ -180,7 +175,11 @@ function FooterDevcontainerChip(props: { chip: NonNullable<DevcontainerChip> })
   );
 }
 
-function FooterRepositoryLabel(props: { workspaceId: string; projectLabel: string }) {
+function FooterRepositoryLabel(props: {
+  workspaceId: string;
+  projectLabel: string;
+  isNarrow: boolean;
+}) {
   const workspacePR = useWorkspacePR(props.workspaceId);
 
   if (!workspacePR) {
@@ -198,7 +197,11 @@ function FooterRepositoryLabel(props: { workspaceId: string; projectLabel: strin
           target="_blank"
           rel="noopener noreferrer"
           data-testid="workspace-footer-repository"
-          className="text-muted hover:bg-hover hover:text-foreground focus-visible:ring-accent flex h-5 min-w-0 items-center gap-1 rounded-md px-1.5 transition-colors focus-visible:ring-1"
+          className={cn(
+            "text-muted hover:bg-hover hover:text-foreground focus-visible:ring-accent flex h-5 min-w-0 items-center gap-1 rounded-md px-1.5 transition-colors focus-visible:ring-1",
+            // Phones cap a long owner/repo like the project label, so the branch keeps some room.
+            props.isNarrow && "max-w-40"
+          )}
         >
           <Github className="h-3 w-3 shrink-0" aria-hidden="true" />
           {/* Truncates like the branch name, so a long owner/repo fits a phone screen (#5769). */}
@@ -462,7 +465,11 @@ export const WorkspaceFooterBar: React.FC<WorkspaceFooterBarProps> = (props) =>
               showMultiProjectStatus={showMultiProjectStatus}
               isNarrow={isNarrow}
             />
-            <FooterRepositoryLabel workspaceId={props.workspaceId} projectLabel={projectLabel} />
+            <FooterRepositoryLabel
+              workspaceId={props.workspaceId}
+              projectLabel={projectLabel}
+              isNarrow={isNarrow}
+            />
             <WorkspaceBranchControls
               workspaceId={props.workspaceId}
               workspaceName={props.workspaceName}

src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.test.tsx

@@ -742,7 +742,6 @@ describe("WorkspaceMenuBar archive confirmations", () => {
 
     render(<WorkspaceMenuBar {...defaultProps} />);
 
-    // The selector, not just the name: phones have no footer branch selector to switch from.
     const branchSelector = BranchSelectorModule.BranchSelector as unknown as {
       mock: { calls: Array<[{ workspaceId: string; workspaceName: string }]> };
     };

src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx

@@ -133,10 +133,9 @@ function getPhoneHeaderSnapshot(): boolean {
 }
 
 /**
- * The full selector, not just the name: phones drop the footer's branch selector, so this is
- * their only way to switch branches. Mounted like the footer's: for every repository workspace,
- * because it loads its own branch (waking a stopped runtime when opened), and keyed by workspace
- * so a header kept across a workspace switch never offers the previous workspace's branches.
+ * Mounted like the footer's selector: for every repository workspace, because it loads its own
+ * branch (waking a stopped runtime when opened), and keyed by workspace so a header kept across a
+ * workspace switch never offers the previous workspace's branches.
  */
 function WorkspaceDetailsBranch(props: {
   workspaceId: string;

src/browser/stories/App.phoneViewports.stories.tsx

@@ -437,15 +437,6 @@ export const IPhone17ProMaxTouchTargetRows: AppStory = {
           workspaceName: "mobile-touch",
           projectName: "mux",
           messages: [...MESSAGES],
-          // Phone widths drop the footer's branch button, so a detected PR supplies the
-          // repository link as the footer's touch target at every width.
-          executeBash: (_workspaceId, script) =>
-            Promise.resolve({
-              success: true as const,
-              output: script.includes("gh pr view") ? PR_DETECTION_JSON : "",
-              exitCode: 0,
-              wall_duration_ms: 5,
-            }),
         })
       }
     />