@broberg/app-shell 0.7.1 → 0.8.0

package/README.md

@@ -53,6 +53,18 @@ 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.8.0 — TenantSwitcher on a phone (F029.10, found by appkit's pilot)
+
+- **The menu stays on screen.** It is anchored to the switcher, which sits among
+  your actions rather than at the edge, so at 393 px it ran off the right side.
+  It is now measured when it opens and shifted back inside, 16 px from the edge.
+- **Changed output: no raw role.** Roles are your app's words, so the switcher
+  cannot translate them, and a bare «member» in a Danish UI is worse than nothing.
+  Pass `roleLabel={(role) => …}` to show them; without it, other rows show no role.
+  The active row still says «aktiv», and a suspended one still says so.
+- **On a phone the switcher takes at most 40% of the width**, and the organisation
+  name is cut with «…» before the page title is.
+
 ## 0.7.1 — TenantSwitcher: the user's own organisations (F029.10)
 
 0.7.0 was tagged but never reached npm: the secret gate stopped it on a test fixture key, now listed in `.gitleaksignore`.

package/css/app-shell.css

@@ -382,7 +382,9 @@
 .bas-tenant__btn:hover, .bas-tenant__btn.is-open { background: var(--active); }
 .bas-tenant__btn::after { content: "▾"; font-size: 10px; color: var(--fg-muted); flex: none; }
 .bas-tenant__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
-.bas-tenant__menu { left: 0; right: auto; }
+.bas-tenant__menu { left: 0; right: auto; max-width: calc(100vw - 32px); }
+/* phone: the org name gives way before the page title does */
+@media (max-width: 767px) { .bas-tenant { max-width: 40vw; } }
 .bas-tenant__item { justify-content: space-between; }
 .bas-tenant__item.is-active { font-weight: 600; }
 .bas-tenant__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

package/dist/preact.cjs

@@ -1352,7 +1352,8 @@ function AnalyticsSeries({ data, t, locale, num }) {
     ] })
   ] });
 }
-function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
+var EDGE = 16;
+function TenantSwitcher({ lang, activeSlug, adapter, onSwitch, roleLabel }) {
   const t = TEXT[lang];
   const api = hooks.useMemo(() => adapter ?? createFetchTenantAdapter(), [adapter]);
   const [rows, setRows] = hooks.useState(null);
@@ -1361,6 +1362,18 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
   const [busy, setBusy] = hooks.useState(null);
   const [switchFailed, setSwitchFailed] = hooks.useState(false);
   const root = hooks.useRef(null);
+  const menu = hooks.useRef(null);
+  hooks.useLayoutEffect(() => {
+    const el = menu.current;
+    if (!open || !el) return;
+    el.style.transform = "";
+    const r = el.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth || window.innerWidth;
+    let dx = 0;
+    if (r.right > vw - EDGE) dx = vw - EDGE - r.right;
+    if (r.left + dx < EDGE) dx = EDGE - r.left;
+    if (dx !== 0) el.style.transform = `translateX(${Math.round(dx)}px)`;
+  }, [open, rows, loadFailed, switchFailed]);
   const load = () => {
     setLoadFailed(false);
     api.load().then(setRows, () => setLoadFailed(true));
@@ -1411,7 +1424,7 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
         children: /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__label", "data-testid": "tenant-switcher-label", children: label })
       }
     ),
-    open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-menu bas-tenant__menu", role: "menu", "data-testid": "tenant-switcher-menu", children: [
+    open ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-menu bas-tenant__menu", ref: menu, role: "menu", "data-testid": "tenant-switcher-menu", children: [
       loadFailed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-tenant__note", role: "alert", "data-testid": "tenant-switcher-load-error", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.tenantLoadFailed }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "bas-mi", onClick: load, "data-testid": "tenant-switcher-retry", children: t.tenantRetry })
@@ -1432,7 +1445,7 @@ function TenantSwitcher({ lang, activeSlug, adapter, onSwitch }) {
             "data-testid": `tenant-switcher-item-${r.tenant.slug}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__name", children: r.tenant.name }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__role", children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : r.role })
+              suspended || isActive || roleLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-tenant__role", "data-testid": `tenant-switcher-role-${r.tenant.slug}`, children: suspended ? t.tenantSuspended : isActive ? t.tenantActive : roleLabel(r.role) }) : null
             ]
           },
           r.tenant.id