admin: the overview pickers fill their wrappers and share a narrow row

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

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. */

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,