fix: refine mobile workspace footer layout

Author: pallyoung

packages/web/src/styles/components.css

@@ -13174,12 +13174,13 @@ textarea.input {
 .mobile-shell__bottom-stack > .workspace-status-bar {
   width: 100%;
   align-self: stretch;
+  flex-wrap: wrap;
+  gap: 0;
   border: none;
   border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
   border-radius: 0;
   background: transparent;
-  padding: 0 calc(var(--mobile-safe-right) + var(--sp-4))
-    calc(var(--mobile-safe-bottom) + var(--sp-1)) calc(var(--mobile-safe-left) + var(--sp-4));
+  padding: 0 0 calc(var(--mobile-safe-bottom) + var(--sp-1));
   box-shadow: none;
 }
 
@@ -13232,6 +13233,7 @@ textarea.input {
 }
 
 .mobile-shell__bottom-stack .git-panel-status-strip {
+  width: 100%;
   gap: 8px;
   min-height: 28px;
   font-size: var(--type-body-6-size);
@@ -13241,24 +13243,50 @@ textarea.input {
 
 .mobile-shell__bottom-stack .workspace-status-bar__left {
   flex: 1 1 auto;
+  padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0
+    calc(var(--mobile-safe-left) + var(--sp-4));
 }
 
 .mobile-shell__bottom-stack .workspace-status-bar__right {
-  flex: 0 1 auto;
-  max-width: 46%;
+  flex: 0 0 100%;
+  width: 100%;
+  max-width: none;
+  justify-content: flex-end;
+  margin-left: 0;
+  padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0
+    calc(var(--mobile-safe-left) + var(--sp-4));
+  border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
+}
+
+.mobile-shell__bottom-stack .workspace-status-bar__right:empty {
+  display: none;
 }
 
 .mobile-shell__bottom-stack .git-panel-status-strip__left {
+  width: 100%;
   gap: 4px;
+  justify-content: space-between;
 }
 
 .mobile-shell__bottom-stack .git-panel-status-strip__branch,
 .mobile-shell__bottom-stack .git-panel-status-strip__meta {
   gap: 4px;
 }
 
+.mobile-shell__bottom-stack .git-panel-status-strip__meta {
+  margin-left: auto;
+  justify-content: flex-end;
+}
+
 .mobile-shell__bottom-stack .footer-update-rail {
+  width: 100%;
+  flex-wrap: wrap;
   gap: 4px;
+  justify-content: flex-end;
+}
+
+.mobile-shell__bottom-stack .footer-update-rail__text {
+  white-space: normal;
 }
 
 .mobile-shell__bottom-stack .git-panel-status-strip__branch .themed-icon svg,

packages/web/src/styles/components.theme.test.ts

@@ -2016,6 +2016,28 @@ describe("components.css theme-sensitive surfaces", () => {
     const statusStrip = getLastRuleBlock(
       ".mobile-shell__bottom-stack .git-panel-status-strip"
     ).replace(/\s+/g, " ");
+    const statusLeft = getLastRuleBlock(
+      ".mobile-shell__bottom-stack .workspace-status-bar__left"
+    ).replace(/\s+/g, " ");
+    const statusStripLeft = getLastRuleBlock(
+      ".mobile-shell__bottom-stack .git-panel-status-strip__left"
+    ).replace(/\s+/g, " ");
+    const statusMeta = getLastRuleBlock(
+      ".mobile-shell__bottom-stack .git-panel-status-strip__meta"
+    ).replace(/\s+/g, " ");
+    const statusRight = getLastRuleBlock(
+      ".mobile-shell__bottom-stack .workspace-status-bar__right"
+    ).replace(/\s+/g, " ");
+    const statusRightEmpty = getLastRuleBlock(
+      ".mobile-shell__bottom-stack .workspace-status-bar__right:empty"
+    ).replace(/\s+/g, " ");
+    const updateRail = getLastRuleBlock(".mobile-shell__bottom-stack .footer-update-rail").replace(
+      /\s+/g,
+      " "
+    );
+    const updateRailText = getLastRuleBlock(
+      ".mobile-shell__bottom-stack .footer-update-rail__text"
+    ).replace(/\s+/g, " ");
     const emptyPane = getLastRuleBlock(".mobile-shell__empty-content");
     const emptyState = getLastRuleBlock(".mobile-shell__empty-state");
     const emptyTitle = getLastRuleBlock(".mobile-shell__empty-title");
@@ -2049,12 +2071,34 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(dockItem).toContain("height: 36px");
     expect(dockItem).toContain("padding: 1px var(--sp-2) 0");
     expect(dockLabel).toContain("font-size: var(--type-body-6-size)");
-    expect(statusBar).toContain(
-      "padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) calc(var(--mobile-safe-bottom) + var(--sp-1)) calc(var(--mobile-safe-left) + var(--sp-4))"
-    );
+    expect(statusBar).toContain("padding: 0 0 calc(var(--mobile-safe-bottom) + var(--sp-1))");
     expect(statusBar).toContain("border-top: 1px solid");
+    expect(statusBar).toContain("flex-wrap: wrap");
+    expect(statusBar).toContain("gap: 0");
     expect(statusStrip).toContain("min-height: 28px");
+    expect(statusStrip).toContain("width: 100%");
     expect(statusStrip).toContain("font-size: var(--type-body-6-size)");
+    expect(statusLeft).toContain(
+      "padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0 calc(var(--mobile-safe-left) + var(--sp-4))"
+    );
+    expect(statusStripLeft).toContain("width: 100%");
+    expect(statusStripLeft).toContain("justify-content: space-between");
+    expect(statusMeta).toContain("margin-left: auto");
+    expect(statusMeta).toContain("justify-content: flex-end");
+    expect(statusRight).toContain("flex: 0 0 100%");
+    expect(statusRight).toContain("width: 100%");
+    expect(statusRight).toContain("max-width: none");
+    expect(statusRight).toContain("justify-content: flex-end");
+    expect(statusRight).toContain("margin-left: 0");
+    expect(statusRight).toContain(
+      "padding: 0 calc(var(--mobile-safe-right) + var(--sp-4)) 0 calc(var(--mobile-safe-left) + var(--sp-4))"
+    );
+    expect(statusRight).toContain("border-top: 1px solid");
+    expect(statusRightEmpty).toContain("display: none");
+    expect(updateRail).toContain("width: 100%");
+    expect(updateRail).toContain("flex-wrap: wrap");
+    expect(updateRail).toContain("justify-content: flex-end");
+    expect(updateRailText).toContain("white-space: normal");
     expect(emptyPane).toContain("position: relative");
     expect(emptyPane).toContain("width: min(100%, 320px)");
     expect(emptyPane).toContain("align-self: flex-start");

packages/web/src/ui-preview/catalog.test.tsx

@@ -357,6 +357,11 @@ describe("UI preview catalog", () => {
     expect(await screen.findByText("New version detected v0.5.0")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /update now/i })).toBeInTheDocument();
     expect(document.querySelector(".footer-update-rail-review.mobile-shell")).toBeTruthy();
+    expect(
+      document.querySelector(
+        ".mobile-shell__bottom-stack .workspace-status-bar__right .footer-update-rail"
+      )
+    ).toBeTruthy();
   });
 
   it("renders the footer update confirm review scene with the post-click confirmation dialog", async () => {