From 356daf845cac3e43add21da914b688c5d173f26e Mon Sep 17 00:00:00 2001
From: Yuxin Qiao <104957188+Yuxin-Qiao@users.noreply.github.com>
Date: Thu, 13 Aug 2026 11:21:47 +0800
Subject: [PATCH] fix(gui): prevent custom select dropdown from overflowing
 viewport when placed on right

---
 .../SubagentDelegationSection.tsx                  |  2 ++
 gui/src/pages/dashboard-overview-sections.tsx      |  6 ++++++
 gui/src/select-position.ts                         | 11 ++++++-----
 gui/tests/select-position.test.ts                  | 14 ++++++++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/gui/src/components/subagents-workspace/SubagentDelegationSection.tsx b/gui/src/components/subagents-workspace/SubagentDelegationSection.tsx
index 2cf672b937..720b60874f 100644
--- a/gui/src/components/subagents-workspace/SubagentDelegationSection.tsx
+++ b/gui/src/components/subagents-workspace/SubagentDelegationSection.tsx
@@ -51,6 +51,7 @@ export default function SubagentDelegationSection({
             onChange={v => onSave({ model: v || null, effort: effort || null })}
             disabled={saving}
             label={t("dash.injectionLabel")}
+            align="right"
           />
           {model && efforts.length > 0 && (
             <Select
@@ -62,6 +63,7 @@ export default function SubagentDelegationSection({
               onChange={v => onSave({ model: model || null, effort: v || null })}
               disabled={saving}
               label={t("dash.injectionEffortLabel")}
+              align="right"
             />
           )}
         </div>
diff --git a/gui/src/pages/dashboard-overview-sections.tsx b/gui/src/pages/dashboard-overview-sections.tsx
index 1b74a7021f..97c8c4e4a7 100644
--- a/gui/src/pages/dashboard-overview-sections.tsx
+++ b/gui/src/pages/dashboard-overview-sections.tsx
@@ -61,6 +61,7 @@ export function DashboardEffortCapPanel({ apiBase, d }: { apiBase: string; d: Da
           }}
           disabled={effortCapSaving}
           label={t("dash.effortCapLabel")}
+          align="right"
         />
         <Select
           value={subagentEffortCap}
@@ -85,6 +86,7 @@ export function DashboardEffortCapPanel({ apiBase, d }: { apiBase: string; d: Da
           }}
           disabled={effortCapSaving}
           label={t("dash.subagentEffortCapLabel")}
+          align="right"
         />
       </div>
     </div>
@@ -118,6 +120,7 @@ export function DashboardInjectionPanel({ d }: { apiBase: string; d: Dash }) {
           onChange={(v) => { void saveInjection({ model: v || null, effort: injectionEffort || null }); }}
           disabled={injectionSaving}
           label={t("dash.injectionLabel")}
+          align="right"
         />
         {injectionModel && injectionEfforts.length > 0 && (
           <Select
@@ -129,6 +132,7 @@ export function DashboardInjectionPanel({ d }: { apiBase: string; d: Dash }) {
             onChange={(v) => { void saveInjection({ model: injectionModel || null, effort: v || null }); }}
             disabled={injectionSaving}
             label={t("dash.injectionEffortLabel")}
+            align="right"
           />
         )}
         <button
@@ -309,6 +313,7 @@ export function DashboardSidecarPanels({ d }: { d: Dash }) {
               onChange={model => { void saveSidecar({ webSearch: { model, backend: sidecarBackendForModel(models, model) } }); }}
               disabled={!sidecar || sidecarSaving}
               label={t("dash.sidecarModel")}
+              align="right"
             />
           </div>
           <div className="muted setting-hint">{t("dash.webSearchSidecarHint")}</div>
@@ -323,6 +328,7 @@ export function DashboardSidecarPanels({ d }: { d: Dash }) {
               onChange={model => { void saveSidecar({ vision: { model, backend: sidecarBackendForModel(models, model) } }); }}
               disabled={!sidecar || sidecarSaving}
               label={t("dash.sidecarModel")}
+              align="right"
             />
           </div>
           <div className="muted setting-hint">{t("dash.visionSidecarHint")}</div>
diff --git a/gui/src/select-position.ts b/gui/src/select-position.ts
index f8ba31f644..c233484108 100644
--- a/gui/src/select-position.ts
+++ b/gui/src/select-position.ts
@@ -34,7 +34,7 @@ function viewportWidth() {
 
 export function computeSelectMenuStyle(
   trigger: SelectMenuTriggerRect,
-  { align = "left", placement = "below", menuHeight = MAX_MENU_HEIGHT_PX }: SelectMenuStyleOptions = {},
+  { align, placement = "below", menuHeight = MAX_MENU_HEIGHT_PX }: SelectMenuStyleOptions = {},
 ): CSSProperties {
   const measuredHeight = Math.min(Math.max(menuHeight, MIN_MENU_HEIGHT_PX), MAX_MENU_HEIGHT_PX);
   const vh = viewportHeight();
@@ -65,6 +65,7 @@ export function computeSelectMenuStyle(
     };
   }
 
+  const effectiveAlign = align ?? (trigger.right > vw / 2 ? "right" : "left");
   const width = Math.max(trigger.width, 0);
   const spaceBelow = vh - trigger.bottom - VIEWPORT_PAD_PX;
   const spaceAbove = trigger.top - VIEWPORT_PAD_PX;
@@ -77,8 +78,8 @@ export function computeSelectMenuStyle(
       minWidth: width,
       maxHeight: Math.max(0, Math.min(MAX_MENU_HEIGHT_PX, spaceAbove - MENU_GAP_PX)),
     };
-    if (align === "right") {
-      style.right = vw - trigger.right;
+    if (effectiveAlign === "right") {
+      style.right = Math.max(VIEWPORT_PAD_PX, vw - trigger.right);
     } else {
       style.left = Math.max(VIEWPORT_PAD_PX, Math.min(trigger.left, vw - VIEWPORT_PAD_PX - width));
     }
@@ -91,8 +92,8 @@ export function computeSelectMenuStyle(
     minWidth: width,
     maxHeight: Math.max(0, Math.min(MAX_MENU_HEIGHT_PX, spaceBelow - MENU_GAP_PX)),
   };
-  if (align === "right") {
-    style.right = vw - trigger.right;
+  if (effectiveAlign === "right") {
+    style.right = Math.max(VIEWPORT_PAD_PX, vw - trigger.right);
   } else {
     style.left = Math.max(VIEWPORT_PAD_PX, Math.min(trigger.left, vw - VIEWPORT_PAD_PX - width));
   }
diff --git a/gui/tests/select-position.test.ts b/gui/tests/select-position.test.ts
index 726b7c68d3..b0fa23c756 100644
--- a/gui/tests/select-position.test.ts
+++ b/gui/tests/select-position.test.ts
@@ -115,3 +115,17 @@ test("right alignment anchors the menu to the trigger's right edge", () => {
   expect(style.right).toBe(704);
   expect(style.left).toBeUndefined();
 });
+
+test("automatically defaults to right alignment when trigger sits in right half of viewport", () => {
+  const style = computeSelectMenuStyle({
+    top: 120,
+    bottom: 156,
+    left: 800,
+    right: 960,
+    width: 160,
+    height: 36,
+  }, { menuHeight: 120 });
+  expect(style.right).toBe(64);
+  expect(style.left).toBeUndefined();
+});
+