From b3d3404ae620fac1eb2f48730146ff20e9c102b6 Mon Sep 17 00:00:00 2001
From: ClawSweeper <steipete+clawsweeper@gmail.com>
Date: Fri, 21 Aug 2026 19:06:50 -0700
Subject: [PATCH] fix(ui): align page titles with page content (#127738)

Co-authored-by: RoboClaw <309084314+roboclaw-bot@users.noreply.github.com>
Co-authored-by: Tak Hoffman <781889+Takhoffman@users.noreply.github.com>
---
 .../activity-session-feed.capture.e2e.test.ts    |  7 +++++++
 ui/src/styles/layout.css                         | 16 +++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui/src/e2e/activity-session-feed.capture.e2e.test.ts b/ui/src/e2e/activity-session-feed.capture.e2e.test.ts
index 248c5b42bd20..6004bcbad05e 100644
--- a/ui/src/e2e/activity-session-feed.capture.e2e.test.ts
+++ b/ui/src/e2e/activity-session-feed.capture.e2e.test.ts
@@ -230,6 +230,13 @@ suite.define(() => {
         await waitForControlUiRoute(page, { pathname: "/activity", routeId: "activity" });
         const activityPage = page.locator("openclaw-activity-page");
         await expect.poll(() => activityPage.count()).toBe(1);
+        const titleLeft = await activityPage
+          .locator(".page-title")
+          .evaluate((element) => element.getBoundingClientRect().left);
+        const tabsLeft = await activityPage
+          .locator(".activity-mode-tabs")
+          .evaluate((element) => element.getBoundingClientRect().left);
+        expect(Math.abs(titleLeft - tabsLeft)).toBeLessThanOrEqual(8);
         await activityPage.locator(".activity-feed__people-trigger").click();
         await expect
           .poll(() =>
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index 0acd4e81fa30..2f506116f814 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -4018,20 +4018,14 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
   max-height: 80px;
 }
 
-/* The fixed web chrome sits over the top-left of ordinary page headers too.
-   Settings, mobile drawers, and native hosts own different chrome. */
+/* Keep ordinary page headers below the fixed web chrome instead of shifting
+   their titles away from the page content. Settings, mobile drawers, and
+   native hosts own different chrome. */
 html:not(.openclaw-native-macos):not(.openclaw-native-nav):not(.openclaw-native-web-chrome)
-  .shell:not(.shell--nav-collapsed):not(.shell--mobile-nav):not(.shell--settings)
+  .shell:not(.shell--mobile-nav):not(.shell--settings)
   .content:not(.content--chat)
   .content-header {
-  padding-left: 88px;
-}
-
-html:not(.openclaw-native-macos):not(.openclaw-native-nav):not(.openclaw-native-web-chrome)
-  .shell--nav-collapsed:not(.shell--mobile-nav):not(.shell--settings)
-  .content:not(.content--chat)
-  .content-header {
-  padding-left: 124px;
+  margin-top: 48px;
 }
 
 .content-header--page + * {