fix(web): align workspace footer git status

Author: pallyoung

packages/web/src/features/workspace/views/shared/git-panel-status-strip.test.tsx

@@ -61,6 +61,9 @@ describe("GitPanelStatusStrip", () => {
     fireEvent.mouseEnter(branchButton!);
 
     expect(screen.getByRole("tooltip")).toHaveTextContent("feature/tooltip-migration");
+    expect(branchButton).toHaveTextContent("feature/tooltip-migration");
+    expect(branchButton).not.toHaveTextContent("↑2");
+    expect(branchButton).not.toHaveTextContent("↓1");
   });
 
   it("opens the desktop branch quick pick from ArrowDown without changing the button semantics", async () => {
@@ -135,4 +138,33 @@ describe("GitPanelStatusStrip", () => {
       expect(input).toHaveFocus();
     });
   });
+
+  it("uses start alignment for desktop footer status strips when requested", () => {
+    const store = createStore();
+    store.set(localeAtom, "en");
+
+    const { container } = render(
+      <Provider store={store}>
+        <GitPanelStatusStrip
+          align="start"
+          workspaceId="ws-1"
+          gitState={{
+            branch: "develop",
+            ahead: 2,
+            behind: 1,
+            staged: [],
+            modified: [],
+            deleted: [],
+            untracked: [],
+          }}
+          onOpenBranchSwitcher={vi.fn()}
+        />
+      </Provider>
+    );
+
+    expect(container.querySelector(".git-panel-status-strip")).toHaveClass(
+      "git-panel-status-strip",
+      "git-panel-status-strip--start"
+    );
+  });
 });

packages/web/src/features/workspace/views/shared/git-panel-status-strip.tsx

@@ -11,6 +11,7 @@ interface GitPanelStatusStripProps {
   workspaceId: string;
   gitState: GitStatus | null | undefined;
   onOpenBranchSwitcher?: () => void;
+  align?: "start" | "end";
 }
 
 interface BranchTriggerProps {
@@ -50,10 +51,7 @@ function BranchTrigger({
         disabled={disabled}
       >
         <GitBranch size={11} />
-        <span className="git-panel-status-strip__branch-text">
-          {branchName}
-          {branchSummary ? ` · ${branchSummary}` : ""}
-        </span>
+        <span className="git-panel-status-strip__branch-text">{branchName}</span>
       </button>
     </Tooltip>
   );
@@ -63,6 +61,7 @@ export function GitPanelStatusStrip({
   workspaceId,
   gitState,
   onOpenBranchSwitcher,
+  align = "end",
 }: GitPanelStatusStripProps) {
   const t = useTranslation();
   const viewport = useViewport();
@@ -88,7 +87,7 @@ export function GitPanelStatusStrip({
   );
 
   return (
-    <div className="git-panel-status-strip">
+    <div className={`git-panel-status-strip git-panel-status-strip--${align}`}>
       {viewport === "desktop" && onOpenBranchSwitcher ? (
         <DesktopBranchQuickPickPopover
           workspaceId={workspaceId}

packages/web/src/features/workspace/views/shared/workspace-status-bar.tsx

@@ -17,6 +17,7 @@ export function WorkspaceStatusBar({
   return (
     <div className={`workspace-status-bar${flush ? " workspace-status-bar--flush" : ""}`}>
       <GitPanelStatusStrip
+        align={flush ? "end" : "start"}
         workspaceId={workspaceId}
         gitState={gitState}
         onOpenBranchSwitcher={onOpenBranchSwitcher}

packages/web/src/styles/components.css

@@ -10170,6 +10170,22 @@ textarea.input {
   margin-left: auto;
 }
 
+.git-panel-status-strip--start {
+  justify-content: flex-start;
+}
+
+.git-panel-status-strip--start .git-panel-status-strip__meta {
+  margin-left: 0;
+}
+
+.git-panel-status-strip--end {
+  justify-content: space-between;
+}
+
+.git-panel-status-strip--end .git-panel-status-strip__meta {
+  margin-left: auto;
+}
+
 .git-panel-status-strip .git-status-bar {
   gap: 4px;
 }