fix(control-ui): tighten About build grid spacing (#111532)

Co-authored-by: Peter Steinberger <steipete@gmail.com>

ui/src/e2e/about.e2e.test.ts

@@ -71,6 +71,19 @@ describeControlUiE2e("Control UI About mocked Gateway E2E", () => {
       await expect.poll(() => commit.textContent()).toBe(COMMIT.slice(0, 12));
       await expect.poll(() => commit.getAttribute("title")).toBe(COMMIT);
 
+      const [versionLabelBox, versionValueBox, commitBox, commitAgeBox] = await Promise.all([
+        strip.locator(":scope > dt").first().boundingBox(),
+        items.first().boundingBox(),
+        commit.boundingBox(),
+        items.nth(1).locator(".about-commit__age").boundingBox(),
+      ]);
+      expect(versionLabelBox).not.toBeNull();
+      expect(versionValueBox).not.toBeNull();
+      expect(commitBox).not.toBeNull();
+      expect(commitAgeBox).not.toBeNull();
+      expect(versionValueBox!.x - (versionLabelBox!.x + versionLabelBox!.width)).toBeLessThan(32);
+      expect(commitAgeBox!.x - (commitBox!.x + commitBox!.width)).toBeLessThan(12);
+
       const built = items.nth(2).locator("time");
       await expect.poll(() => built.textContent()).toBe("Jul 10, 2026");
       await expect.poll(() => built.getAttribute("datetime")).toBe(BUILT_AT);

ui/src/pages/about/view.test.ts

@@ -87,6 +87,7 @@ describe("renderAbout", () => {
     const values = facts?.querySelectorAll("dd");
     expect(facts?.getAttribute("role")).toBe("group");
     expect(facts?.getAttribute("aria-label")).toBe("Control UI build details");
+    expect(facts?.classList.contains("about-build-grid")).toBe(true);
     expect(values).toHaveLength(4);
     expect(values?.[0]?.textContent).toContain("2026.7.10");
     expect(values?.[1]?.querySelector("code")?.textContent).toBe(COMMIT.slice(0, 12));
@@ -101,6 +102,7 @@ describe("renderAbout", () => {
         new Date(COMMIT_AT),
       ),
     );
+    expect(commitAge?.nextElementSibling?.tagName.toLowerCase()).toBe("openclaw-tooltip");
 
     expect(values?.[2]?.textContent).toContain("feature/build-chip*");
 

ui/src/pages/about/view.ts

@@ -133,6 +133,7 @@ function renderCommit(props: AboutProps) {
   return html`
     <span class="about-commit">
       <code dir="ltr" title=${commit}>${commit.slice(0, SHORT_COMMIT_LENGTH)}</code>
+      ${renderCommitAge(props.buildInfo.commitAt)}
       <openclaw-tooltip .content=${label}>
         <button
           type="button"
@@ -145,7 +146,6 @@ function renderCommit(props: AboutProps) {
           <span aria-hidden="true">${props.copyState === "copied" ? icons.check : icons.copy}</span>
         </button>
       </openclaw-tooltip>
-      ${renderCommitAge(props.buildInfo.commitAt)}
       <span class="about-sr-only" role="status" aria-live="polite"
         >${copyStatus(props.copyState)}</span
       >
@@ -198,7 +198,11 @@ function renderHero(props: AboutProps) {
 export function renderAbout(props: AboutProps) {
   const buildDate = formatControlUiBuildDate(props.buildInfo.builtAt, i18n.getLocale());
   const buildFacts = html`
-    <dl class="settings-kv" role="group" aria-label=${t("aboutPage.artifactDetails")}>
+    <dl
+      class="settings-kv about-build-grid"
+      role="group"
+      aria-label=${t("aboutPage.artifactDetails")}
+    >
       <dt>${t("aboutPage.version")}</dt>
       <dd>
         ${props.buildInfo.version

ui/src/styles/about.css

@@ -219,7 +219,13 @@
   }
 }
 
-/* Commit hash + copy button cluster inside the build facts grid. */
+/* About labels are short, so the shared 120px settings label track leaves an
+   oversized gutter here. Keep the values close while preserving room to wrap. */
+.about-build-grid {
+  grid-template-columns: max-content minmax(0, 1fr);
+}
+
+/* Commit hash, age, and copy button cluster inside the build facts grid. */
 .about-commit {
   display: inline-flex;
   align-items: center;