From 81ce206ee84f1ea4f25c4c35b718a5ef5b169ada Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Sat, 11 Jul 2026 01:05:15 -0700
Subject: [PATCH] improve(control-ui): move dev branch badge to its own footer
 strip (#104300)

The sidebar footer icon row got crowded with the inline branch label.
The dev-checkout branch now renders on a slim tinted strip above the
icon bar with a git-branch icon, keeping the full name readable and
the footer controls uncluttered.
---
 ui/src/components/app-sidebar.ts          | 13 +++++---
 ui/src/e2e/sidebar-dev-branch.e2e.test.ts |  4 ++-
 ui/src/styles/layout.css                  | 39 +++++++++++++++++++----
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/app-sidebar.ts b/ui/src/components/app-sidebar.ts
index 4eca5cc51787..fc86f33c1a45 100644
--- a/ui/src/components/app-sidebar.ts
+++ b/ui/src/components/app-sidebar.ts
@@ -1941,6 +1941,14 @@ class AppSidebar extends OpenClawLightDomContentsElement {
               .soundsEnabled=${this.lobsterPetSounds}
               .gatewayVersion=${this.gatewayVersion}
             ></openclaw-lobster-pet>
+            ${this.devGitBranch
+              ? html`<div class="sidebar-footer-branch" title=${this.devGitBranch}>
+                  <span class="sidebar-footer-branch__icon" aria-hidden="true"
+                    >${icons.gitBranch}</span
+                  >
+                  <span class="sidebar-footer-branch__name">${this.devGitBranch}</span>
+                </div>`
+              : nothing}
             <div class="sidebar-footer-bar">
               <openclaw-tooltip .content=${gatewayStatusTooltip}>
                 <span
@@ -1952,11 +1960,6 @@ class AppSidebar extends OpenClawLightDomContentsElement {
                   aria-label=${gatewayStatus}
                 ></span>
               </openclaw-tooltip>
-              ${this.devGitBranch
-                ? html`<span class="sidebar-footer-branch" title=${this.devGitBranch}
-                    >${this.devGitBranch}</span
-                  >`
-                : nothing}
               <span class="sidebar-footer-bar__spacer"></span>
               <openclaw-tooltip .content=${settingsTooltip}>
                 <a
diff --git a/ui/src/e2e/sidebar-dev-branch.e2e.test.ts b/ui/src/e2e/sidebar-dev-branch.e2e.test.ts
index 5290ad4da644..00d0f5ce03cf 100644
--- a/ui/src/e2e/sidebar-dev-branch.e2e.test.ts
+++ b/ui/src/e2e/sidebar-dev-branch.e2e.test.ts
@@ -52,7 +52,9 @@ describeControlUiE2e("Control UI sidebar dev branch badge E2E", () => {
 
       const badge = page.locator(".sidebar-footer-branch");
       await badge.waitFor();
-      await expect.poll(() => badge.textContent()).toBe(DEV_BRANCH);
+      await expect
+        .poll(() => badge.locator(".sidebar-footer-branch__name").textContent())
+        .toBe(DEV_BRANCH);
       await expect.poll(() => badge.getAttribute("title")).toBe(DEV_BRANCH);
 
       const colors = await badge.evaluate((element) => {
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index c82077725bab..294cbd70e52b 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -1735,20 +1735,45 @@ openclaw-session-menu[popover] {
   flex: 1 1 auto;
 }
 
-/* Dev-checkout branch badge: only rendered when the gateway runs from a git
-   checkout off main, so operators notice non-release gateway code at a glance. */
+/* Dev-checkout branch strip: only rendered when the gateway runs from a git
+   checkout off main. Sits on its own row above the icon bar so the full branch
+   name stays readable without crowding the footer controls. */
 .sidebar-footer-branch {
-  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   min-width: 0;
-  margin-left: 6px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  margin: 0 10px 2px;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
   font-size: 11px;
   font-family: var(--font-mono);
   color: var(--danger);
 }
 
+.sidebar-footer-branch__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.sidebar-footer-branch__icon svg {
+  width: 12px;
+  height: 12px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.7px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.sidebar-footer-branch__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Footer icons mix in-app anchors, buttons, and one external docs link: the
    chrome gets the default arrow; only the external (target=_blank) anchor is
    a real hyperlink and keeps the pointer. */