From 2c8ca5cb0b5fb497928606c70cd9602c3d74585b Mon Sep 17 00:00:00 2001
From: Neel <neelpatel805804@gmail.com>
Date: Sat, 29 Aug 2026 19:03:25 +0530
Subject: [PATCH 1/5] fix(web): keep environment pill inside narrow sidebar

---
 .../src/components/sidebar/SidebarChrome.tsx  | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 705216b93214..8a56d21ad976 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -51,7 +51,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
   return (
     <SidebarHeader
       className={cn(
-        "@container/sidebar-header relative h-[var(--workspace-topbar-height)] shrink-0 flex-row items-center px-3 py-0 md:px-0",
+        "@container/sidebar-header relative h-[var(--workspace-topbar-height)] shrink-0 flex-row items-center overflow-hidden px-3 py-0 md:px-0",
         isElectron && "drag-region",
       )}
     >
@@ -64,17 +64,19 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
           backdropVariant && resolveSidebarStageFocusRingOffsetClass(backdropVariant),
         )}
       />
-      <SidebarBrand onBackdrop={backdropVariant !== null} />
-      {pillLabel ? (
-        <Badge
-          className="relative z-10 ml-1 rounded-full px-1.5 text-muted-foreground"
-          data-environment-identification="pill"
-          size="sm"
-          variant="secondary"
-        >
-          {pillLabel}
-        </Badge>
-      ) : null}
+      <div className="relative z-10 flex min-w-0 items-center gap-0.5 md:ml-[var(--workspace-titlebar-content-left)]">
+        <SidebarBrand onBackdrop={backdropVariant !== null} />
+        {pillLabel ? (
+          <Badge
+            className="rounded-full px-1 text-muted-foreground"
+            data-environment-identification="pill"
+            size="sm"
+            variant="secondary"
+          >
+            {pillLabel}
+          </Badge>
+        ) : null}
+      </div>
     </SidebarHeader>
   );
 });
@@ -84,7 +86,7 @@ function SidebarBrand({ onBackdrop }: { onBackdrop: boolean }) {
     <Link
       aria-label="Go to threads"
       className={cn(
-        "relative z-10 ml-[var(--workspace-titlebar-content-left)] hidden h-7 w-fit min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-md outline-hidden ring-ring focus-visible:ring-2 md:flex",
+        "relative hidden h-7 w-fit min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-md outline-hidden ring-ring focus-visible:ring-2 md:flex",
         onBackdrop ? "text-white" : "text-foreground",
       )}
       to="/"
@@ -92,7 +94,7 @@ function SidebarBrand({ onBackdrop }: { onBackdrop: boolean }) {
       <T3Wordmark />
       <span
         className={cn(
-          "-translate-y-px truncate text-sm font-medium tracking-tight",
+          "-translate-y-px hidden truncate text-sm font-medium tracking-tight @[15rem]/sidebar-header:inline",
           onBackdrop ? "text-white/70" : "text-muted-foreground",
         )}
       >

From 1e3b99f0e069ddbeeaa8dd4a429d3d0d6f4960d0 Mon Sep 17 00:00:00 2001
From: Neel <neelpatel805804@gmail.com>
Date: Sat, 29 Aug 2026 21:08:59 +0530
Subject: [PATCH 2/5] fix(web): increase environment pill spacing

---
 apps/web/src/components/sidebar/SidebarChrome.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 8a56d21ad976..e57b3ed40f50 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -64,7 +64,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
           backdropVariant && resolveSidebarStageFocusRingOffsetClass(backdropVariant),
         )}
       />
-      <div className="relative z-10 flex min-w-0 items-center gap-0.5 md:ml-[var(--workspace-titlebar-content-left)]">
+      <div className="relative z-10 flex min-w-0 items-center gap-1 md:ml-[var(--workspace-titlebar-content-left)]">
         <SidebarBrand onBackdrop={backdropVariant !== null} />
         {pillLabel ? (
           <Badge

From f29471a50b224a0b336f7f3f4eac5c71788fbf7b Mon Sep 17 00:00:00 2001
From: Neel <neelpatel805804@gmail.com>
Date: Sat, 29 Aug 2026 21:20:21 +0530
Subject: [PATCH 3/5] fix(web): refine sidebar environment pill layout

---
 apps/web/src/components/sidebar/SidebarChrome.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index e57b3ed40f50..498953348056 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -51,7 +51,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
   return (
     <SidebarHeader
       className={cn(
-        "@container/sidebar-header relative h-[var(--workspace-topbar-height)] shrink-0 flex-row items-center overflow-hidden px-3 py-0 md:px-0",
+        "@container/sidebar-header relative h-[var(--workspace-topbar-height)] shrink-0 flex-row items-center px-3 py-0 md:px-0",
         isElectron && "drag-region",
       )}
     >
@@ -64,11 +64,11 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
           backdropVariant && resolveSidebarStageFocusRingOffsetClass(backdropVariant),
         )}
       />
-      <div className="relative z-10 flex min-w-0 items-center gap-1 md:ml-[var(--workspace-titlebar-content-left)]">
+      <div className="relative z-10 flex min-w-0 flex-1 items-center gap-1 overflow-hidden md:mr-3 md:ml-[var(--workspace-titlebar-content-left)]">
         <SidebarBrand onBackdrop={backdropVariant !== null} />
         {pillLabel ? (
           <Badge
-            className="rounded-full px-1 text-muted-foreground"
+            className="ml-auto shrink-0 rounded-full px-1 text-muted-foreground"
             data-environment-identification="pill"
             size="sm"
             variant="secondary"

From 47e116a0923632872ea5e9748a86df6c4a64c98d Mon Sep 17 00:00:00 2001
From: Neel <neelpatel805804@gmail.com>
Date: Sat, 29 Aug 2026 21:22:19 +0530
Subject: [PATCH 4/5] fix(web): keep code label visible over artwork

---
 apps/web/src/components/sidebar/SidebarChrome.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 498953348056..17cc751773a7 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -94,8 +94,10 @@ function SidebarBrand({ onBackdrop }: { onBackdrop: boolean }) {
       <T3Wordmark />
       <span
         className={cn(
-          "-translate-y-px hidden truncate text-sm font-medium tracking-tight @[15rem]/sidebar-header:inline",
-          onBackdrop ? "text-white/70" : "text-muted-foreground",
+          "-translate-y-px truncate text-sm font-medium tracking-tight",
+          onBackdrop
+            ? "text-white/70"
+            : "hidden text-muted-foreground @[15rem]/sidebar-header:inline",
         )}
       >
         Code

From 24b2d397341acd3709a9b67032c8ef2e02907c7a Mon Sep 17 00:00:00 2001
From: Neel <neelpatel805804@gmail.com>
Date: Sat, 29 Aug 2026 21:30:22 +0530
Subject: [PATCH 5/5] fix(web): preserve sidebar brand focus ring

---
 apps/web/src/components/sidebar/SidebarChrome.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 17cc751773a7..1e5ffe61107e 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -64,11 +64,11 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
           backdropVariant && resolveSidebarStageFocusRingOffsetClass(backdropVariant),
         )}
       />
-      <div className="relative z-10 flex min-w-0 flex-1 items-center gap-1 overflow-hidden md:mr-3 md:ml-[var(--workspace-titlebar-content-left)]">
+      <div className="relative z-10 flex min-w-0 flex-1 items-center gap-1 md:mr-3 md:ml-[var(--workspace-titlebar-content-left)]">
         <SidebarBrand onBackdrop={backdropVariant !== null} />
         {pillLabel ? (
           <Badge
-            className="ml-auto shrink-0 rounded-full px-1 text-muted-foreground"
+            className="ml-1 shrink-0 rounded-full px-1 text-muted-foreground md:ml-auto"
             data-environment-identification="pill"
             size="sm"
             variant="secondary"
@@ -86,7 +86,7 @@ function SidebarBrand({ onBackdrop }: { onBackdrop: boolean }) {
     <Link
       aria-label="Go to threads"
       className={cn(
-        "relative hidden h-7 w-fit min-w-0 shrink-0 items-center gap-1 overflow-hidden rounded-md outline-hidden ring-ring focus-visible:ring-2 md:flex",
+        "relative hidden h-7 w-fit min-w-0 items-center gap-1 overflow-hidden rounded-md outline-hidden ring-ring focus-visible:ring-2 md:flex",
         onBackdrop ? "text-white" : "text-foreground",
       )}
       to="/"