fix(ui): keep Inbox clear of title text (#129992)

Co-authored-by: roboclaw-bot <309084314+roboclaw-bot@users.noreply.github.com>

ui/src/e2e/native-nav-sidebar-toggle.e2e.test.ts

@@ -24,6 +24,11 @@ const suite = createControlUiE2eSuite({
 const TOAST_PROOF_DIR = path.resolve(".artifacts/control-ui-e2e/toast-layering");
 const railProofDir = process.env.OPENCLAW_UI_RAIL_PROOF_DIR?.trim();
 const limitedScopes = ["operator.read", "operator.write"];
+const UPDATE_AVAILABLE = {
+  channel: "stable",
+  currentVersion: "1.0.0",
+  latestVersion: "2.0.0",
+} as const;
 const TOAST_SCENARIO: ControlUiMockGatewayScenario = {
   featureMethods: ["chat.metadata", "chat.startup", "sessions.catalog.list"],
   methodResponses: {
@@ -263,7 +268,19 @@ suite.define(() => {
   });
 
   it("hosts navigation, search, sessions, and history in web titlebar chrome", async () => {
-    const page = await openPage({ webChrome: true });
+    const page = await openPage({
+      scenario: {
+        featureMethods: ["chat.metadata", "chat.startup", "sessions.create", "update.run"],
+        operatorScopes: ["operator.admin", "operator.read"],
+        updateAvailable: UPDATE_AVAILABLE,
+        updateSchedule: {
+          channel: "stable",
+          autoEnabled: false,
+          target: { kind: "package", version: "2.0.0" },
+        },
+      },
+      webChrome: true,
+    });
     const toolbar = page.locator(".macos-titlebar-controls");
     await expect.poll(() => toolbar.isVisible()).toBe(true);
     await expect.poll(() => page.locator(".shell-chrome-controls").isVisible()).toBe(false);
@@ -276,6 +293,7 @@ suite.define(() => {
     await expect.poll(() => forward.isDisabled()).toBe(true);
     await expect.poll(() => search.isVisible()).toBe(true);
     await expect.poll(() => newThread.count()).toBe(0);
+    await page.locator(".sidebar-issues-button__count").waitFor();
 
     await toolbar.getByRole("button", { name: "Collapse sidebar" }).click();
     await expect
@@ -284,10 +302,24 @@ suite.define(() => {
     await expect.poll(() => newThread.isVisible()).toBe(true);
     await page.locator(".sidebar-attention--floating .sidebar-issues-button").waitFor();
     const toolbarBox = await toolbar.boundingBox();
-    const attentionBox = await page.locator(".sidebar-attention--floating").boundingBox();
+    const attention = page.locator(".sidebar-attention--floating");
+    const attentionBox = await attention.boundingBox();
     expect(toolbarBox).not.toBeNull();
     expect(attentionBox).not.toBeNull();
     expect(attentionBox!.x - (toolbarBox!.x + toolbarBox!.width)).toBeGreaterThanOrEqual(4);
+    const titleBox = await page
+      .locator(".chat-pane-cache__pane--visible .chat-pane__crumbs:visible")
+      .first()
+      .boundingBox();
+    const attentionRight = await attention.evaluate((element) =>
+      Math.max(
+        ...[element, ...element.querySelectorAll("*")].map(
+          (candidate) => candidate.getBoundingClientRect().right,
+        ),
+      ),
+    );
+    expect(titleBox).not.toBeNull();
+    expect(titleBox!.x - attentionRight).toBeGreaterThanOrEqual(8);
     const topLeftControls = page.locator(
       ".macos-titlebar-controls button:visible, .sidebar-attention--floating button:visible",
     );

ui/src/styles/chat/split-view.css

@@ -860,7 +860,8 @@ html.openclaw-native-nav .shell--nav-collapsed:not(.shell--mobile-nav) {
 
 html.openclaw-native-web-chrome .shell--nav-collapsed:not(.shell--mobile-nav) {
   --shell-titlebar-inset: calc(
-    var(--shell-native-titlebar-safe-area-left) + var(--shell-attention-width)
+    var(--shell-native-titlebar-controls-inset) + var(--shell-native-titlebar-controls-width) +
+      var(--shell-chrome-controls-gap) + var(--shell-attention-width)
   );
 }
 

ui/src/styles/layout.css

@@ -12,7 +12,6 @@
   --shell-chrome-controls-gap: 4px;
   --shell-native-titlebar-controls-inset: 92px;
   --shell-native-titlebar-controls-width: 156px;
-  --shell-native-titlebar-safe-area-left: 246px;
   /* Collapsed navigation adds new-thread to the two persistent controls.
      Optional controls contribute only while they are actually mounted. */
   --shell-controls-width: 104px;