authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-02 22:31:45-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-02 22:31:45-07:00
log0bc59bbae391ee45ab3a7cfb2dc703c8b27e5772
tree7a1b270785f416bd925b1aca5f380f740b5ce0c6
parent1575ada305b9686b9771df2dca304f391e85a76e
signature Signed by PGP key B5690EEEBB952194

fix(web): let the pull request list use wide screens (#9351)

Co-authored-by: Claude Code <noreply@anthropic.com>

2 files changed, 39 insertions(+), 12 deletions(-)

apps/web/src/components/pullRequest/PullRequestRow.tsx+38-11
...@@ -16,19 +16,46 @@ import {...@@ -16,19 +16,46 @@ import {
16 PullRequestStateGlyph,16 PullRequestStateGlyph,
17} from "./pullRequestPresentation";17} from "./pullRequestPresentation";
1818
19/**
20 * Each slot past the first only appears once the meta line is wide enough to hold it, so a
21 * narrow row shows one label and a "+N" while a wide one spreads out up to three. The "+N"
22 * rides on whichever pill is the last visible one, and is hidden as soon as the next slot shows.
23 */
24const LABEL_SLOTS = [
25 { pill: "", overflow: "@xl/pr-row-meta:hidden" },
26 { pill: "hidden @xl/pr-row-meta:inline-flex", overflow: "@3xl/pr-row-meta:hidden" },
27 { pill: "hidden @3xl/pr-row-meta:inline-flex", overflow: "" },
28] as const;
29
19function PullRequestRowLabels({ labels }: { labels: EnvironmentPullRequestEntry["labels"] }) {30function PullRequestRowLabels({ labels }: { labels: EnvironmentPullRequestEntry["labels"] }) {
20 const label = labels[0];31 if (labels.length === 0) return null;
21 if (!label) return null;
22 const dot = pullRequestLabelColor(label.color);
23 return (32 return (
24 <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">33 <span className="flex min-w-0 items-center gap-1">
25 <span34 {LABEL_SLOTS.map((slot, index) => {
26 aria-hidden35 const label = labels[index];
27 className="size-2 shrink-0 rounded-full bg-muted-foreground"36 if (!label) return null;
28 {...(dot ? { style: { backgroundColor: dot } } : {})}37 const dot = pullRequestLabelColor(label.color);
29 />38 const remaining = labels.length - index - 1;
30 <span className="truncate">{label.name}</span>39 return (
31 {labels.length > 1 ? <span className="shrink-0">+{labels.length - 1}</span> : null}40 <span
41 key={label.name}
42 className={cn(
43 "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",
44 slot.pill,
45 )}
46 >
47 <span
48 aria-hidden
49 className="size-2 shrink-0 rounded-full bg-muted-foreground"
50 {...(dot ? { style: { backgroundColor: dot } } : {})}
51 />
52 <span className="truncate">{label.name}</span>
53 {remaining > 0 ? (
54 <span className={cn("shrink-0", slot.overflow)}>+{remaining}</span>
55 ) : null}
56 </span>
57 );
58 })}
32 </span>59 </span>
33 );60 );
34}61}
apps/web/src/routes/_chat.pull-requests.tsx+1-1
...@@ -2296,7 +2296,7 @@ function PullRequestsColumn({...@@ -2296,7 +2296,7 @@ function PullRequestsColumn({
2296 {/* The top padding is the shared fade band's height, the same pairing the2296 {/* The top padding is the shared fade band's height, the same pairing the
2297 settings page makes: at rest the controls sit fully below the mask, and only2297 settings page makes: at rest the controls sit fully below the mask, and only
2298 content actually passing under the chrome fades. */}2298 content actually passing under the chrome fades. */}
2299 <WorkspacePageContainer className="gap-4">2299 <WorkspacePageContainer width="expanded" className="gap-4">
2300 <div className="flex flex-col gap-3">2300 <div className="flex flex-col gap-3">
2301 <div ref={inFlowSearchRef} className="flex items-center gap-2">2301 <div ref={inFlowSearchRef} className="flex items-center gap-2">
2302 {searchInput}2302 {searchInput}