@broberg/app-shell 0.11.0 → 0.11.1

package/README.md

@@ -53,6 +53,16 @@ the user menu reads and writes theme, palette, surfaces and backdrop through it.
 | `TenantSwitcher` | The user's own organisations, the active one marked, switching through the app's route (0.7.1). |
 | `AnalyticsPage` | The app's own visitors, page views, page views per day and most visited pages, from Upmetrics (0.6.0). |
 
+## 0.11.1 — the palette list floats over the menu (F001.25)
+
+Christian 10/10: «Kunne denne ikke være en pop-over ting så dialogen ikke bliver
+forstørret hver gang man klikker på listen?» The list is now a popover
+(`position: fixed`, placed from the button): the menu keeps its height and
+nothing below moves. It opens below the button, upward when there is no room,
+stays inside the viewport, and closes when the menu scrolls or the window
+resizes. testids and keys unchanged. Rendering moved: the open list no longer
+pushes «Flader» and the rest down.
+
 ## 0.11.0 — the user menu's Appearance, tidied (F001.23)
 
 Christian 10/10, via appkit: «Neuroner … er reelt set kun til trail og cardmem» and «Paletten er ikke pæn».
@@ -68,7 +78,7 @@ Christian 10/10, via appkit: «Neuroner … er reelt set kun til trail og cardme
 - **Palette is a dropdown**, not four wrapping buttons. Custom, not a native
   `<select>` (D-4cd764): arrows open and move, Enter/Space choose, Escape closes
   the list without choosing and leaves the menu open; a second Escape closes the
-  menu. It opens in flow under its row, so the menu never clips it.
+  menu. (0.11.1: it floats over the menu as a popover.)
   testids: `user-menu-palette` (the button), `user-menu-palette-list`,
   `user-menu-palette-<id>` (each option). **A Lens flow that clicked
   `user-menu-palette-<id>` directly must click `user-menu-palette` first.**

package/css/app-shell.css

@@ -298,11 +298,10 @@
 }
 .bas-seg > button[aria-pressed="true"] { background: var(--olive-btn); color: var(--paper, var(--bg-card)); }
 .bas-seg > button:not([aria-pressed="true"]):hover { color: var(--fg); }
-/* F001.23 — the palette dropdown. The list opens IN FLOW under its row (the
-   menu clips its overflow, so an absolute list near the bottom would be cut);
-   display:contents lets button and list wrap inside .bas-pref. */
-.bas-pref:has(> .bas-dd) { flex-wrap: wrap; }
-.bas-dd { display: contents; }
+/* F001.23/F001.25 — the palette dropdown. The list is a POPOVER (position
+   fixed, placed from the button in JS), so opening it neither grows the menu
+   nor gets clipped by its overflow. */
+.bas-dd { position: relative; display: inline-flex; }
 .bas-dd__btn {
   display: inline-flex; align-items: center; gap: 8px; min-width: 120px; justify-content: space-between;
   font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 500; padding: 5px 10px;
@@ -313,8 +312,9 @@
 .bas-dd__btn[aria-expanded="true"] .bas-dd__caret { transform: rotate(180deg); }
 .bas-dd__caret { color: var(--fg-muted); transition: transform .12s; }
 .bas-dd__list {
-  flex-basis: 100%; list-style: none; margin: 4px 0 0; padding: 4px;
-  border-radius: var(--bas-radius); background: var(--bg-sunk); border: 1px solid var(--border);
+  z-index: 70; list-style: none; margin: 0; padding: 4px; max-height: min(60vh, 320px); overflow-y: auto;
+  border-radius: var(--bas-radius); background: var(--bg-card); border: 1px solid var(--border);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
 }
 .bas-dd__opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: calc(var(--bas-radius) - 2px); font-size: 12.5px; color: var(--fg); cursor: pointer; }
 .bas-dd__opt.is-active { background: var(--hover); }

package/dist/preact.cjs

@@ -847,6 +847,33 @@ function Segmented(props) {
 }
 function Dropdown(props) {
   const [state, setState] = hooks.useState({ open: false, highlighted: -1 });
+  const btnRef = hooks.useRef(null);
+  const listRef = hooks.useRef(null);
+  const [pos, setPos] = hooks.useState(void 0);
+  hooks.useLayoutEffect(() => {
+    if (!state.open || !btnRef.current) return setPos(void 0);
+    const r = btnRef.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, m = 8;
+    const h = listRef.current?.offsetHeight ?? 0;
+    const width = Math.min(Math.max(r.width, 160), vw - 2 * m);
+    const left = Math.max(m, Math.min(r.right - width, vw - width - m));
+    const below = r.bottom + 4;
+    const top = below + h <= vh - m || r.top - 4 - h < m ? Math.min(below, vh - m - h) : r.top - 4 - h;
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${width}px` });
+  }, [state.open]);
+  hooks.useEffect(() => {
+    if (!state.open) return;
+    const close = (e) => {
+      if (e.target instanceof Node && listRef.current?.contains(e.target)) return;
+      setState((st) => ({ ...st, open: false }));
+    };
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [state.open]);
   const current = Math.max(0, props.options.findIndex(([v]) => v === props.value));
   const choose = (i) => {
     setState({ open: false, highlighted: i });
@@ -867,6 +894,7 @@ function Dropdown(props) {
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: btnRef,
         type: "button",
         class: "bas-dd__btn",
         "data-testid": props.testid,
@@ -882,7 +910,7 @@ function Dropdown(props) {
         ]
       }
     ),
-    state.open ? /* @__PURE__ */ jsxRuntime.jsx("ul", { class: "bas-dd__list", role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    state.open ? /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: listRef, class: "bas-dd__list", style: pos ?? { position: "fixed", visibility: "hidden" }, role: "listbox", "aria-label": props.label, "data-testid": `${props.testid}-list`, children: props.options.map(([v, label], i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
         id: optId(v),