@broberg/app-shell 0.22.0 → 0.22.1

package/README.md

@@ -187,6 +187,10 @@ right-aligned before the chevron — «Type …… All ›», testid `<prefix>-a
 The focus ring now shows only for keyboard use: after a mouse open the first item has focus but no ring; opening
 with Enter from a keyboard-focused anchor, or any key in the menu, shows it. ↑↓/Enter/Escape are unchanged.
 
+**0.22.1** — a long `value` no longer clips the label (F092.33, scout #2830): the value gives way first and
+ellipses; the label only once the value is gone. The menu now sizes to its content between 240 and 320px
+(`--bas-menu-min-width` / `--bas-menu-max-width`, never wider than the viewport − 16px) instead of a fixed 240px.
+
 ## 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

package/css/app-shell.css

@@ -158,6 +158,7 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 /* F092.32 — sized as tokens (scout's measurement of Claude Desktop at 1×). Not
    declared here, only read with a fallback, so an app's :root value wins. */
 .bas-rowmenu {
+  min-width: var(--bas-menu-min-width, 240px); max-width: min(var(--bas-menu-max-width, 320px), calc(100vw - 16px)); box-sizing: border-box;
   z-index: 70; padding: var(--bas-menu-padding, 6px); outline: none; border-radius: var(--bas-menu-radius, 14px); background: var(--bg-card);
   border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
 }
@@ -169,7 +170,8 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 /* Focus ring for keyboard use only; a mouse open shows the highlight alone. */
 .bas-rowmenu__item:focus, .bas-rowmenu__back:focus { outline: none; }
 .bas-rowmenu.is-kbd .bas-rowmenu__item:focus, .bas-rowmenu.is-kbd .bas-rowmenu__back:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
-.bas-rowmenu__value { flex: none; color: var(--fg-muted); }
+/* F092.33 — the value gives way first; the label only once the value is gone. */
+.bas-rowmenu__value { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); }
 .bas-rowmenu__sep { height: 1px; margin: 6px 4px; background: var(--border); }
 .bas-rowmenu__back { color: var(--fg-muted); font-weight: 500; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; }
 .bas-rowmenu__item.is-active, .bas-rowmenu__item:hover, .bas-rowmenu__back:hover { background: var(--hover); }
@@ -177,7 +179,7 @@ button.bas-group__label:hover { color: var(--bas-group-label-color, var(--fg-mut
 .bas-rowmenu__item.is-danger { color: var(--danger); }
 .bas-rowmenu__item.is-armed { background: var(--danger-soft, var(--hover)); font-weight: 500; }
 .bas-rowmenu__icon { display: inline-flex; color: var(--fg-subtle); }
-.bas-rowmenu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bas-rowmenu__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .bas-rowmenu__kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(11px * var(--bas-font-scale, 1)); color: var(--fg-subtle); }
 .bas-rowmenu__form { display: flex; gap: 6px; padding: 4px; }
 .bas-rowmenu__input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: calc(var(--bas-radius) - 2px); background: var(--bg-sunk); color: var(--fg); font: inherit; font-size: calc(13px * var(--bas-font-scale, 1)); }

package/dist/preact.cjs

@@ -578,7 +578,7 @@ function ItemActionsMenu(props) {
   hooks.useLayoutEffect(() => {
     const r = props.anchor.getBoundingClientRect();
     const vw = window.innerWidth, vh = window.innerHeight, m = 8;
-    const w = Math.min(240, vw - 2 * m);
+    const w = Math.min(Math.max(240, menu.current?.offsetWidth ?? 0), vw - 2 * m);
     const h = menu.current?.offsetHeight ?? 0;
     const start = props.placement === "up-start";
     const left = Math.max(m, Math.min(start ? r.left : r.right - w, vw - w - m));
@@ -586,7 +586,7 @@ function ItemActionsMenu(props) {
     const fitsAbove = r.top - 4 - h >= m;
     const below = start ? !fitsAbove : props.placement === "down" || fitsBelow || !fitsAbove;
     const top = below ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
-    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px` });
   }, [stack.length]);
   hooks.useLayoutEffect(() => {
     if (!pos) return;
@@ -670,7 +670,7 @@ function ItemActionsMenu(props) {
       tabIndex: -1,
       "aria-label": view.kind === "list" && view.title ? view.title : props.label,
       "data-testid": `${pre}-menu`,
-      style: pos ?? { position: "fixed", visibility: "hidden" },
+      style: pos ?? { position: "fixed", left: "0px", top: "0px", visibility: "hidden" },
       onKeyDown,
       children: [
         stack.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `${pre}-back`, "aria-label": t.back, onClick: back, children: [