From 563cea4e6641be793b15d7c8d449a0dbd84eece2 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Thu, 13 Aug 2026 20:07:14 -0700
Subject: [PATCH] fix(ui): shared picker's 138px floor overflows narrow grid
 cells (#123175)

The phone-width ellipsis fix (#123085) promoted a chat-composer-scoped
138px minimum onto the shared select-picker inline style, which beats
every consumer stylesheet. Containers that legitimately shrink below
138px overflow instead: the cron 'Every N <unit>' and stagger-window
unit pickers spill out of their minmax(0,1fr) grid cells at 320px, and
workboard's min-width:0 became dead. Cap the floor at the host width
with min(138px,100%); the readable-label floor is preserved everywhere
the container is wide enough (the mobile e2e asserts it at 364px). Also
fix the stale '8ch' comment from the pre-138px iteration.
---
 ui/src/components/select-picker.test.ts | 23 +++++++++++++++++++++++
 ui/src/components/select-picker.ts      |  7 ++++---
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/components/select-picker.test.ts

diff --git a/ui/src/components/select-picker.test.ts b/ui/src/components/select-picker.test.ts
new file mode 100644
index 000000000000..5cf016f39a86
--- /dev/null
+++ b/ui/src/components/select-picker.test.ts
@@ -0,0 +1,23 @@
+// The shared picker keeps a 138px readable-label floor (phone-width ellipsis
+// fix) but must never exceed its host container: cron/channel grid cells
+// legitimately shrink below 138px and an unconditional floor overflows them.
+import { render } from "lit";
+import { describe, expect, it } from "vitest";
+import { renderPicker } from "./select-picker.ts";
+
+describe("renderPicker", () => {
+  it("caps the readable-label floor at the host container width", () => {
+    const host = document.createElement("div");
+    render(
+      renderPicker({
+        label: "Unit",
+        value: "minutes",
+        options: [{ value: "minutes", label: "minutes" }],
+        onChange: () => {},
+      }),
+      host,
+    );
+    const select = host.querySelector("wa-select");
+    expect(select?.getAttribute("style")).toContain("min-width:min(138px,100%)");
+  });
+});
diff --git a/ui/src/components/select-picker.ts b/ui/src/components/select-picker.ts
index 2f28a17dc53d..19766a803e02 100644
--- a/ui/src/components/select-picker.ts
+++ b/ui/src/components/select-picker.ts
@@ -24,8 +24,9 @@ export type PickerParams<Option extends PickerOption> = {
 };
 
 export function renderPicker<Option extends PickerOption>(params: PickerParams<Option>) {
-  // Web Awesome syncs the listbox to its trigger; keep 8ch for the label after
-  // its fixed check and leading-icon columns instead of collapsing the options.
+  // Web Awesome syncs the listbox to its trigger; keep a 138px label floor so
+  // option text does not collapse to an ellipsis at phone widths, but never
+  // exceed the host container (cron/channel grids legitimately shrink below it).
   const options =
     params.value === null ||
     params.value === "" ||
@@ -42,7 +43,7 @@ export function renderPicker<Option extends PickerOption>(params: PickerParams<O
     <wa-select
       id=${params.id ?? nothing}
       class=${`settings-select picker-select ${params.className ?? ""}`}
-      style="width:100%;min-width:138px"
+      style="width:100%;min-width:min(138px,100%)"
       title=${params.title ?? nothing}
       placement=${params.placement ?? nothing}
       .value=${params.value}