From 4f74f2262405dd06c0fc3aa0cbcd8de1d683b0a7 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 10:02:13 +0800
Subject: [PATCH] fix(ui): Size Select popups to the widest option and truncate
 the PR repo name

Virtualised list rows are absolutely positioned, so the popup only took the
trigger's width and cut short labels like "Merged". The Pull Requests header
now keeps the repository on one line with an ellipsis and a tooltip.
---
 src/features/github/Github.module.css    |  4 ++++
 src/features/github/PullRequestsView.tsx |  7 ++++++-
 src/ui/Select.module.css                 | 19 +++++++++++++++++--
 src/ui/Select.tsx                        | 12 +++++++++++-
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/features/github/Github.module.css b/src/features/github/Github.module.css
index caf68f7c5..28bcfbfc2 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 234b33353..443c4fd1b 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 <span className={styles.repo}>{availability.repo.nameWithOwner}</span>;
+  const name = availability.repo.nameWithOwner;
+  return (
+    <span className={styles.repo} title={name}>
+      {name}
+    </span>
+  );
 }
diff --git a/src/ui/Select.module.css b/src/ui/Select.module.css
index 6aafcfa0f..f0b63981b 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 963dd0365..f6730b463 100644
--- a/src/ui/Select.tsx
+++ b/src/ui/Select.tsx
@@ -127,6 +127,16 @@ export function Select<V extends string = string>({
         className={styles.popup}
       >
         <div tabIndex={-1} data-autofocus onKeyDown={onPopupKey} className={styles.popupInner}>
+          {/* Virtualised rows are absolutely positioned; this sizes the popup to the widest label. */}
+          <div aria-hidden className={styles.sizer}>
+            {options.map((o) => (
+              <div key={o.value} className={styles.sizerRow}>
+                <span className={styles.check} />
+                {o.icon && <Icon name={o.icon} size={14} />}
+                <span>{tx(o.label)}</span>
+              </div>
+            ))}
+          </div>
           <List
             items={options}
             getKey={(o) => o.value}
@@ -144,7 +154,7 @@ export function Select<V extends string = string>({
               <>
                 <span className={styles.check}>{o.value === value && <Icon name="check" size={12} />}</span>
                 {o.icon && <Icon name={o.icon} size={14} />}
-                <span className={styles.optionLabel}>{tx(o.label)}</span>
+                <span className={clsx(styles.optionLabel, o.detail && styles.withDetail)}>{tx(o.label)}</span>
                 {o.detail && (
                   <span className={styles.detail} title={o.detail}>
                     {tx(o.detail)}