mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-19 17:11:42 -06:00
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:
committed by
GitHub
parent
c66d5d84db
commit
563cea4e66
@@ -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%)");
|
||||
});
|
||||
});
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user