From 0bc59bbae391ee45ab3a7cfb2dc703c8b27e5772 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 2 Sep 2026 22:31:45 -0700
Subject: [PATCH] fix(web): let the pull request list use wide screens (#9351)

Co-authored-by: Claude Code <noreply@anthropic.com>
---
 .../components/pullRequest/PullRequestRow.tsx | 49 ++++++++++++++-----
 apps/web/src/routes/_chat.pull-requests.tsx   |  2 +-
 2 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/pullRequest/PullRequestRow.tsx b/apps/web/src/components/pullRequest/PullRequestRow.tsx
index 2284144d7fd191b75fc389c18da5af6e8d73a9ac..6ee686a9de7e698c8a28e5c67ad8765a1723e375 100644
--- a/apps/web/src/components/pullRequest/PullRequestRow.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestRow.tsx
@@ -16,19 +16,46 @@ import {
   PullRequestStateGlyph,
 } from "./pullRequestPresentation";
 
+/**
+ * Each slot past the first only appears once the meta line is wide enough to hold it, so a
+ * narrow row shows one label and a "+N" while a wide one spreads out up to three. The "+N"
+ * rides on whichever pill is the last visible one, and is hidden as soon as the next slot shows.
+ */
+const LABEL_SLOTS = [
+  { pill: "", overflow: "@xl/pr-row-meta:hidden" },
+  { pill: "hidden @xl/pr-row-meta:inline-flex", overflow: "@3xl/pr-row-meta:hidden" },
+  { pill: "hidden @3xl/pr-row-meta:inline-flex", overflow: "" },
+] as const;
+
 function PullRequestRowLabels({ labels }: { labels: EnvironmentPullRequestEntry["labels"] }) {
-  const label = labels[0];
-  if (!label) return null;
-  const dot = pullRequestLabelColor(label.color);
+  if (labels.length === 0) return null;
   return (
-    <span className="inline-flex max-w-40 min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/40 py-0 pl-1 pr-1.5 text-[10px] leading-3.5 text-muted-foreground">
-      <span
-        aria-hidden
-        className="size-2 shrink-0 rounded-full bg-muted-foreground"
-        {...(dot ? { style: { backgroundColor: dot } } : {})}
-      />
-      <span className="truncate">{label.name}</span>
-      {labels.length > 1 ? <span className="shrink-0">+{labels.length - 1}</span> : null}
+    <span className="flex min-w-0 items-center gap-1">
+      {LABEL_SLOTS.map((slot, index) => {
+        const label = labels[index];
+        if (!label) return null;
+        const dot = pullRequestLabelColor(label.color);
+        const remaining = labels.length - index - 1;
+        return (
+          <span
+            key={label.name}
+            className={cn(
+              "inline-flex max-w-40 min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/40 py-0 pl-1 pr-1.5 text-[10px] leading-3.5 text-muted-foreground",
+              slot.pill,
+            )}
+          >
+            <span
+              aria-hidden
+              className="size-2 shrink-0 rounded-full bg-muted-foreground"
+              {...(dot ? { style: { backgroundColor: dot } } : {})}
+            />
+            <span className="truncate">{label.name}</span>
+            {remaining > 0 ? (
+              <span className={cn("shrink-0", slot.overflow)}>+{remaining}</span>
+            ) : null}
+          </span>
+        );
+      })}
     </span>
   );
 }
diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx
index aaf6f9a63a2f0aef65b4dd7dda3297694cfdfb60..912366d14ab47e1df7c93005531b1c35aaab0272 100644
--- a/apps/web/src/routes/_chat.pull-requests.tsx
+++ b/apps/web/src/routes/_chat.pull-requests.tsx
@@ -2296,7 +2296,7 @@ function PullRequestsColumn({
         {/* The top padding is the shared fade band's height, the same pairing the
             settings page makes: at rest the controls sit fully below the mask, and only
             content actually passing under the chrome fades. */}
-        <WorkspacePageContainer className="gap-4">
+        <WorkspacePageContainer width="expanded" className="gap-4">
           <div className="flex flex-col gap-3">
             <div ref={inFlowSearchRef} className="flex items-center gap-2">
               {searchInput}
-- 
2.54.0