From 2938a6d796c0817a1b7826106defc3ea5248c571 Mon Sep 17 00:00:00 2001
From: Sawyer Cutler <sawyer@dirtroad.dev>
Date: Wed, 4 Nov 2026 11:01:49 -0800
Subject: [PATCH] fix(web): centre and space the What's new badge in the
 sidebar

---
 apps/web/src/App.tsx    | 6 ++++--
 apps/web/src/styles.css | 8 ++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 52367833..d012c0b9 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -446,8 +446,10 @@ export function AppSidebar({
         <ul className="app-sidebar-list">
           <SidebarItem asChild>
             <button type="button" onClick={onOpenWhatsNew}>
-              <span>{wording.shell.whatsNew}</span>
-              <Badge tone="neutral">{wording.shell.whatsNewBadge}</Badge>
+              <span className="app-sidebar-whats-new">
+                <span>{wording.shell.whatsNew}</span>
+                <Badge tone="neutral">{wording.shell.whatsNewBadge}</Badge>
+              </span>
             </button>
           </SidebarItem>
           <SidebarItem asChild active={inSettings} icon={<SettingsIcon />}>
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 656d4051..16c92f5e 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -361,6 +361,14 @@ form:has(> div > textarea) textarea:focus-visible {
   gap: 1px;
 }
 
+/* SidebarItem puts all children in one inline label, so the badge needs its own row to centre and space against the text. */
+.app-sidebar-whats-new {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  vertical-align: middle;
+}
+
 .app-sidebar .app-sidebar-initial {
   width: 18px;
   height: 18px;