diff --git a/src/features/github/Github.module.css b/src/features/github/Github.module.css index caf68f7c..28bcfbfc 100644 --- a/src/features/github/Github.module.css +++ b/src/features/github/Github.module.css @@ -37,7 +37,11 @@ white-space: nowrap; } .repo { + min-width: 0; margin-left: 8px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: var(--fg-subtle); font-size: var(--fs-small); } diff --git a/src/features/github/PullRequestsView.tsx b/src/features/github/PullRequestsView.tsx index 234b3335..443c4fd1 100644 --- a/src/features/github/PullRequestsView.tsx +++ b/src/features/github/PullRequestsView.tsx @@ -591,5 +591,10 @@ export function PullRequestsView() { export function PullRequestsHeader() { const availability = useGithub((s) => s.availability); if (availability?.kind !== "ready") return null; - return {availability.repo.nameWithOwner}; + const name = availability.repo.nameWithOwner; + return ( + + {name} + + ); } diff --git a/src/ui/Select.module.css b/src/ui/Select.module.css index 6aafcfa0..f0b63981 100644 --- a/src/ui/Select.module.css +++ b/src/ui/Select.module.css @@ -72,14 +72,29 @@ flex: none; color: var(--fg-muted); } -/* The label keeps its width (up to most of the row); a long detail (a path) is cut instead. */ +.sizer { + height: 0; + overflow: hidden; + visibility: hidden; +} +/* Mirrors a List row: inset, padding and gap. */ +.sizerRow { + display: flex; + gap: 6px; + margin: 0 var(--list-inset, 6px); + padding: 0 8px; + white-space: nowrap; +} .optionLabel { flex: 1 0 auto; - max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +/* The label keeps its width (up to most of the row); a long detail (a path) is cut instead. */ +.withDetail { + max-width: 70%; +} .detail { flex: 0 1 auto; min-width: 0; diff --git a/src/ui/Select.tsx b/src/ui/Select.tsx index 963dd036..f6730b46 100644 --- a/src/ui/Select.tsx +++ b/src/ui/Select.tsx @@ -127,6 +127,16 @@ export function Select({ className={styles.popup} >
+ {/* Virtualised rows are absolutely positioned; this sizes the popup to the widest label. */} +
+ {options.map((o) => ( +
+ + {o.icon && } + {tx(o.label)} +
+ ))} +
o.value} @@ -144,7 +154,7 @@ export function Select({ <> {o.value === value && } {o.icon && } - {tx(o.label)} + {tx(o.label)} {o.detail && ( {tx(o.detail)}