| @@ -16,19 +16,46 @@ import { · 15 unmodified lines |
| 16 | 16 | PullRequestStateGlyph, |
| 17 | 17 | } from "./pullRequestPresentation"; |
| 18 | 18 | |
| 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 | + */ |
| 24 | +const 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 | + |
| 19 | 30 | function 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; |
| 23 | 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"> |
| 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 | + })} |
| 32 | 59 | </span> |
| 33 | 60 | ); |
| 34 | 61 | } |