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.
This commit is contained in:
Peter Steinberger
2026-08-13 20:07:14 -07:00
committed by GitHub
parent c66d5d84db
commit 563cea4e66
2 changed files with 27 additions and 3 deletions
+23
View File
@@ -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%)");
});
});
+4 -3
View File
@@ -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}