From 8fa635236bad1f84808e67c893d1656b87541fdd Mon Sep 17 00:00:00 2001
From: Charles Vien <charles.v@posthog.com>
Date: Tue, 14 Jul 2026 18:56:14 -0700
Subject: [PATCH 1/2] move alpha and beta badges next to labels

---
 .../src/features/sidebar/components/items/HomeItem.tsx |  4 +++-
 .../features/sidebar/components/items/InboxItem.tsx    | 10 ++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/features/sidebar/components/items/HomeItem.tsx b/packages/ui/src/features/sidebar/components/items/HomeItem.tsx
index c8c2ccb8eb..3354223121 100644
--- a/packages/ui/src/features/sidebar/components/items/HomeItem.tsx
+++ b/packages/ui/src/features/sidebar/components/items/HomeItem.tsx
@@ -21,6 +21,9 @@ export function HomeItem({
       label={
         <>
           Home
+          <Badge variant="info" className="ml-2">
+            Alpha
+          </Badge>
           <SidebarCountBadge
             count={attentionCount}
             title={`${attentionCount} item${attentionCount === 1 ? "" : "s"} needing attention`}
@@ -29,7 +32,6 @@ export function HomeItem({
       }
       isActive={isActive}
       onClick={onClick}
-      endContent={<Badge variant="info">Alpha</Badge>}
     />
   );
 }
diff --git a/packages/ui/src/features/sidebar/components/items/InboxItem.tsx b/packages/ui/src/features/sidebar/components/items/InboxItem.tsx
index f05e183499..0e4fc9c392 100644
--- a/packages/ui/src/features/sidebar/components/items/InboxItem.tsx
+++ b/packages/ui/src/features/sidebar/components/items/InboxItem.tsx
@@ -35,6 +35,9 @@ export function InboxItem({
           label={
             <>
               Inbox
+              <Badge variant="warning" className="ml-2">
+                Beta
+              </Badge>
               <SidebarCountBadge
                 count={pullRequestCount}
                 title={`${pullRequestCount} pull requests to review`}
@@ -43,12 +46,7 @@ export function InboxItem({
           }
           isActive={isActive}
           onClick={onClick}
-          endContent={
-            <>
-              <Badge variant="warning">Beta</Badge>
-              <SidebarKbdHint keys={SHORTCUTS.INBOX} />
-            </>
-          }
+          endContent={<SidebarKbdHint keys={SHORTCUTS.INBOX} />}
         />
       </div>
     </Tooltip>

From 3c616eeb8e02cb703a573504e19ceb232a39d7ae Mon Sep 17 00:00:00 2001
From: Charles Vien <charles.v@posthog.com>
Date: Tue, 14 Jul 2026 19:02:02 -0700
Subject: [PATCH 2/2] keep stage badges visible when labels truncate

---
 .../sidebar/components/SidebarItem.tsx        | 20 ++++++++++++++++---
 .../sidebar/components/items/HomeItem.tsx     |  4 +---
 .../sidebar/components/items/InboxItem.tsx    |  4 +---
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/features/sidebar/components/SidebarItem.tsx b/packages/ui/src/features/sidebar/components/SidebarItem.tsx
index de90cc6d33..b11117f09e 100644
--- a/packages/ui/src/features/sidebar/components/SidebarItem.tsx
+++ b/packages/ui/src/features/sidebar/components/SidebarItem.tsx
@@ -25,11 +25,19 @@ interface SidebarItemProps {
   onDoubleClick?: () => void;
   onContextMenu?: (e: React.MouseEvent) => void;
   action?: SidebarItemAction;
+  /** Hugs the label but never truncates with it; pushes endContent right. */
+  badge?: React.ReactNode;
   endContent?: React.ReactNode;
   disabled?: boolean;
 }
 
-function SidebarItemLabel({ label }: { label: React.ReactNode }) {
+function SidebarItemLabel({
+  label,
+  grow,
+}: {
+  label: React.ReactNode;
+  grow: boolean;
+}) {
   const canTooltip = typeof label === "string" || typeof label === "number";
 
   const measureRef = useCallback((el: HTMLSpanElement | null) => {
@@ -44,7 +52,7 @@ function SidebarItemLabel({ label }: { label: React.ReactNode }) {
   }, []);
 
   const span = (
-    <span ref={measureRef} className="min-w-0 flex-1 truncate">
+    <span ref={measureRef} className={cn("min-w-0 truncate", grow && "flex-1")}>
       {label}
     </span>
   );
@@ -76,6 +84,7 @@ export function SidebarItem({
   onClick,
   onDoubleClick,
   onContextMenu,
+  badge,
   endContent,
   disabled,
 }: SidebarItemProps) {
@@ -108,7 +117,12 @@ export function SidebarItem({
       ) : null}
       <span className="flex min-w-0 flex-1 flex-col">
         <span className="flex min-h-[18px] items-center gap-1">
-          <SidebarItemLabel label={label} />
+          <SidebarItemLabel label={label} grow={!badge} />
+          {badge ? (
+            <span className="mr-auto ml-1 flex shrink-0 items-center">
+              {badge}
+            </span>
+          ) : null}
           {endContent}
         </span>
         {subtitle ? (
diff --git a/packages/ui/src/features/sidebar/components/items/HomeItem.tsx b/packages/ui/src/features/sidebar/components/items/HomeItem.tsx
index 3354223121..8b9c66c9f5 100644
--- a/packages/ui/src/features/sidebar/components/items/HomeItem.tsx
+++ b/packages/ui/src/features/sidebar/components/items/HomeItem.tsx
@@ -21,15 +21,13 @@ export function HomeItem({
       label={
         <>
           Home
-          <Badge variant="info" className="ml-2">
-            Alpha
-          </Badge>
           <SidebarCountBadge
             count={attentionCount}
             title={`${attentionCount} item${attentionCount === 1 ? "" : "s"} needing attention`}
           />
         </>
       }
+      badge={<Badge variant="info">Alpha</Badge>}
       isActive={isActive}
       onClick={onClick}
     />
diff --git a/packages/ui/src/features/sidebar/components/items/InboxItem.tsx b/packages/ui/src/features/sidebar/components/items/InboxItem.tsx
index 0e4fc9c392..d99e9a78a1 100644
--- a/packages/ui/src/features/sidebar/components/items/InboxItem.tsx
+++ b/packages/ui/src/features/sidebar/components/items/InboxItem.tsx
@@ -35,15 +35,13 @@ export function InboxItem({
           label={
             <>
               Inbox
-              <Badge variant="warning" className="ml-2">
-                Beta
-              </Badge>
               <SidebarCountBadge
                 count={pullRequestCount}
                 title={`${pullRequestCount} pull requests to review`}
               />
             </>
           }
+          badge={<Badge variant="warning">Beta</Badge>}
           isActive={isActive}
           onClick={onClick}
           endContent={<SidebarKbdHint keys={SHORTCUTS.INBOX} />}