Fix mobile connection banner layout

Author: pallyoung

packages/web/src/shells/shared/connection-status-banner.test.tsx

@@ -5,6 +5,14 @@ import { activationReasonAtom, activationStatusAtom } from "../../atoms/activati
 import { connectionStatusAtom, lastReconnectAttemptAtom } from "../../atoms/connection";
 import { ConnectionStatusBanner } from "./connection-status-banner";
 
+const viewportMocks = vi.hoisted(() => ({
+  value: "desktop" as "desktop" | "mobile",
+}));
+
+vi.mock("../../components/ui/_internal/use-viewport", () => ({
+  useViewport: () => viewportMocks.value,
+}));
+
 function renderBanner() {
   const store = createStore();
 
@@ -24,6 +32,7 @@ describe("ConnectionStatusBanner", () => {
 
   afterEach(() => {
     vi.useRealTimers();
+    viewportMocks.value = "desktop";
   });
 
   it("renders the unified reconnect message while reconnecting", () => {
@@ -36,6 +45,18 @@ describe("ConnectionStatusBanner", () => {
     expect(screen.getByText("连接已断开，正在重新连接...")).toBeInTheDocument();
   });
 
+  it("uses the shared mobile banner layout while reconnecting", () => {
+    viewportMocks.value = "mobile";
+    const store = renderBanner();
+
+    act(() => {
+      store.set(connectionStatusAtom, "reconnecting");
+    });
+
+    expect(screen.getByRole("status")).toHaveClass("connection-banner--mobile");
+    expect(screen.getByRole("status")).not.toHaveClass("connection-banner--stacked");
+  });
+
   it("shows the displaced-session message instead of reconnecting when activation is gated", () => {
     const store = renderBanner();
 
@@ -49,6 +70,21 @@ describe("ConnectionStatusBanner", () => {
     expect(screen.queryByText("连接已断开，正在重新连接...")).not.toBeInTheDocument();
   });
 
+  it("uses the shared mobile banner layout for displaced-session state", () => {
+    viewportMocks.value = "mobile";
+    const store = renderBanner();
+
+    act(() => {
+      store.set(activationStatusAtom, "gated");
+      store.set(activationReasonAtom, "displaced");
+      store.set(connectionStatusAtom, "disconnected");
+    });
+
+    expect(screen.getByRole("status")).toHaveClass("connection-banner--mobile");
+    expect(screen.getByRole("status")).toHaveClass("connection-banner--error");
+    expect(screen.getByText("另一个标签页已激活")).toBeInTheDocument();
+  });
+
   it("shows the slow recovery hint after 25 seconds", () => {
     const startedAt = new Date("2026-05-14T00:00:00.000Z").getTime();
     vi.setSystemTime(startedAt + 25_000);
@@ -101,4 +137,23 @@ describe("ConnectionStatusBanner", () => {
       screen.queryByText("连接恢复较慢，可能是网络问题。如果长时间没有恢复，可以刷新页面。")
     ).not.toBeInTheDocument();
   });
+
+  it("stacks the slow recovery hint and uses compact copy on mobile", () => {
+    viewportMocks.value = "mobile";
+    const startedAt = new Date("2026-05-14T00:00:00.000Z").getTime();
+    vi.setSystemTime(startedAt + 25_000);
+    const store = renderBanner();
+
+    act(() => {
+      store.set(connectionStatusAtom, "reconnecting");
+      store.set(lastReconnectAttemptAtom, startedAt);
+    });
+
+    expect(screen.getByRole("status")).toHaveClass("connection-banner--mobile");
+    expect(screen.getByRole("status")).toHaveClass("connection-banner--stacked");
+    expect(screen.getByText("连接恢复较慢，长时间未恢复可刷新页面。")).toBeInTheDocument();
+    expect(
+      screen.queryByText("连接恢复较慢，可能是网络问题。如果长时间没有恢复，可以刷新页面。")
+    ).not.toBeInTheDocument();
+  });
 });

packages/web/src/shells/shared/connection-status-banner.tsx

@@ -2,14 +2,19 @@ import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { activationReasonAtom, activationStatusAtom } from "../../atoms/activation";
 import { connectionStatusAtom, lastReconnectAttemptAtom } from "../../atoms/connection";
+import { useViewport } from "../../components/ui/_internal/use-viewport";
 
 const SLOW_RECOVERY_HINT_MS = 25_000;
+const SLOW_RECOVERY_HINT_TEXT = "连接恢复较慢，可能是网络问题。如果长时间没有恢复，可以刷新页面。";
+const SLOW_RECOVERY_HINT_TEXT_MOBILE = "连接恢复较慢，长时间未恢复可刷新页面。";
 
 export function ConnectionStatusBanner() {
   const activationStatus = useAtomValue(activationStatusAtom);
   const activationReason = useAtomValue(activationReasonAtom);
   const connectionStatus = useAtomValue(connectionStatusAtom);
   const lastReconnectAttempt = useAtomValue(lastReconnectAttemptAtom);
+  const viewport = useViewport();
+  const isMobile = viewport === "mobile";
   const [now, setNow] = useState(() => Date.now());
 
   useEffect(() => {
@@ -44,7 +49,11 @@ export function ConnectionStatusBanner() {
     (activationStatus === "gated" && activationReason === "displaced")
   ) {
     return (
-      <div className="connection-banner connection-banner--error" role="status" aria-live="polite">
+      <div
+        className={`connection-banner${isMobile ? " connection-banner--mobile" : ""} connection-banner--error`}
+        role="status"
+        aria-live="polite"
+      >
         <span>另一个标签页已激活</span>
       </div>
     );
@@ -54,12 +63,21 @@ export function ConnectionStatusBanner() {
     lastReconnectAttempt !== null &&
     now - lastReconnectAttempt >= SLOW_RECOVERY_HINT_MS &&
     (connectionStatus === "reconnecting" || connectionStatus === "disconnected");
+  const stacked = showSlowRecoveryHint && isMobile;
+  const slowRecoveryHintText = isMobile ? SLOW_RECOVERY_HINT_TEXT_MOBILE : SLOW_RECOVERY_HINT_TEXT;
+  const className = [
+    "connection-banner",
+    isMobile ? "connection-banner--mobile" : null,
+    stacked ? "connection-banner--stacked" : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
-    <div className="connection-banner" role="status" aria-live="polite">
-      <span>连接已断开，正在重新连接...</span>
+    <div className={className} role="status" aria-live="polite">
+      <span className="connection-banner__primary">连接已断开，正在重新连接...</span>
       {showSlowRecoveryHint ? (
-        <span>连接恢复较慢，可能是网络问题。如果长时间没有恢复，可以刷新页面。</span>
+        <span className="connection-banner__hint">{slowRecoveryHintText}</span>
       ) : null}
     </div>
   );

packages/web/src/styles/base.css

@@ -660,6 +660,8 @@ textarea::placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--sp-2);
+  padding: 0 var(--sp-4);
   background: var(--accent-amber);
   color: var(--text-inverse);
   font-size: var(--type-label-size);
@@ -668,6 +670,41 @@ textarea::placeholder {
   z-index: var(--z-toast);
 }
 
+.connection-banner__primary,
+.connection-banner__hint {
+  min-width: 0;
+}
+
+.connection-banner__hint {
+  opacity: 0.88;
+}
+
+.connection-banner--mobile {
+  min-height: calc(var(--sp-6) + var(--mobile-safe-top));
+  padding-top: var(--mobile-safe-top);
+  padding-right: calc(var(--mobile-safe-right) + var(--sp-3));
+  padding-left: calc(var(--mobile-safe-left) + var(--sp-3));
+}
+
+.connection-banner--stacked {
+  height: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 2px;
+  padding-top: calc(var(--mobile-safe-top) + var(--sp-1));
+  padding-right: calc(var(--mobile-safe-right) + var(--sp-3));
+  padding-bottom: var(--sp-1);
+  padding-left: calc(var(--mobile-safe-left) + var(--sp-3));
+}
+
+.connection-banner--stacked .connection-banner__primary,
+.connection-banner--stacked .connection-banner__hint {
+  width: 100%;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
 .connection-banner--error {
   background: var(--color-error);
 }