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 {
1616 PullRequestStateGlyph,
1717} 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
1930function PullRequestRowLabels({ labels }: { labels: EnvironmentPullRequestEntry["labels"] }) {
20 const label = labels[0];
21 if (!label) return null;
22 const dot = pullRequestLabelColor(label.color);
31 if (labels.length === 0) return null;
2332 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">
25 <span
26 aria-hidden
27 className="size-2 shrink-0 rounded-full bg-muted-foreground"
28 {...(dot ? { style: { backgroundColor: dot } } : {})}
29 />
30 <span className="truncate">{label.name}</span>
31 {labels.length > 1 ? <span className="shrink-0">+{labels.length - 1}</span> : null}
33 <span className="flex min-w-0 items-center gap-1">
34 {LABEL_SLOTS.map((slot, index) => {
35 const label = labels[index];
36 if (!label) return null;
37 const dot = pullRequestLabelColor(label.color);
38 const remaining = labels.length - index - 1;
39 return (
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 })}
3259 </span>
3360 );
3461}
apps/web/src/routes/_chat.pull-requests.tsx+1-1
......@@ -2296,7 +2296,7 @@ function PullRequestsColumn({
22962296 {/* The top padding is the shared fade band's height, the same pairing the
22972297 settings page makes: at rest the controls sit fully below the mask, and only
22982298 content actually passing under the chrome fades. */}
2299 <WorkspacePageContainer className="gap-4">
2299 <WorkspacePageContainer width="expanded" className="gap-4">
23002300 <div className="flex flex-col gap-3">
23012301 <div ref={inFlowSearchRef} className="flex items-center gap-2">
23022302 {searchInput}