diff --git a/CHANGELOG.md b/CHANGELOG.md index 47bf159..19a3e42 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to nxdns are recorded here. The format follows [Keep a Chang Sections are written by hand. Nothing here is generated from commit messages: the point of the file is to say what changed for an operator, which a commit subject rarely does. +## [Unreleased] + +### Fixed + +- **The Overview scope pickers no longer sit apart, and a long device name no longer pushes the period picker off a phone screen.** The Device and Period dropdowns fill their wrappers and stand side by side; a long name truncates with an ellipsis in the trigger and stays fully readable in the list. + ## [0.0.17] - 2026-09-08 ### Added diff --git a/admin/src/features/overview/OverviewFrame.tsx b/admin/src/features/overview/OverviewFrame.tsx index 33e6960..12fa423 100644 --- a/admin/src/features/overview/OverviewFrame.tsx +++ b/admin/src/features/overview/OverviewFrame.tsx @@ -60,10 +60,14 @@ const styles = stylex.create({ toolbar: { display: "flex", gap: "0.5rem", + // Without this the row's minimum is both labels at full length, and a + // long device name pushes the period picker past the viewport edge. + minWidth: 0, flexBasis: { default: null, [NARROW]: "100%" }, }, control: { minWidth: { default: "11rem", [NARROW]: 0 }, + maxWidth: { default: "20rem", [NARROW]: "none" }, flex: { default: null, [NARROW]: 1 }, }, /** Under the Device control: the list behind it did not load, so the control offers the household only. */ diff --git a/admin/src/ui/Select.tsx b/admin/src/ui/Select.tsx index b8d81cf..764f0ec 100644 --- a/admin/src/ui/Select.tsx +++ b/admin/src/ui/Select.tsx @@ -80,6 +80,9 @@ const styles = stylex.create({ }, /** Rectangular, hairline, full hit height: the decision record's toolbar selector. */ toolbar: { + // A button keeps its content width even as a flex container, so without + // this the scope picker's 11rem wrapper shows as dead space beside it. + width: "100%", minHeight: metrics.hitTarget, borderRadius: metrics.radius, borderWidth: 1,