@scalio-cloud/ui 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.1
+- Phones: the context select (tenant, customer) is hidden in the header below 640px, there is no room next to
+  the header buttons. `AppShell` takes `drawerTop` and shows it above the navigation in the phone drawer.
+
 ## 0.5.0
 - **Visible change:** `rounded-sm` is now 2px as UISPEC says (was 0px from the preset). Buttons, fields, cards and
   badges in Nexus, Citadel and Foundry get barely visible round corners; Rosetta already had 2px and can drop its

package/README.md

@@ -102,6 +102,7 @@ const apps = useScalioApps(() => api.get("/apps").then((r) => r.data));   // onc
   sidebar={<Sidebar nav={NAV} link={NavLink} lang={lang} version={VERSION} commit={COMMIT}
     search={{ onOpen: openPalette, shortcut: "⌘K" }} primaryAction={{ label: t("Scan starten"), icon: Play, onSelect: scan }} />}
   drawerOpen={drawer} onDrawerClose={() => setDrawer(false)}   // phones: same sidebar in a drawer (test ids with "m-")
+  drawerTop={<ContextSelect ... testId="m-tenant-switcher" />}  // below 640px the header hides the select, the drawer shows it
 >
   <Routes>...</Routes>
 </AppShell>

package/nav.css

@@ -97,8 +97,13 @@
 .scalio-switcher-icon { width: 0.75rem; height: 0.75rem; }
 .scalio-switcher-soon { margin-left: 0.125rem; padding: 0 0.25rem; border: 1px solid #3f3f46; border-radius: 2px; font-size: 9px; line-height: 14px; text-transform: none; letter-spacing: normal; color: #71717a; }
 
-/* Context select (tenant, customer, organisation) in the header */
+/* Context select (tenant, customer, organisation) in the header; below 640px it moves into the drawer (drawerTop) */
 .scalio-context { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
+.scalio-header .scalio-context { display: none; }
+@media (min-width: 640px) { .scalio-header .scalio-context { display: flex; } }
+.scalio-sidebar-top .scalio-context { flex-wrap: wrap; }
+.scalio-sidebar-top .scalio-context-label { display: block; width: 100%; }
+.scalio-sidebar-top .scalio-context-field, .scalio-sidebar-top .scalio-context-select { width: 100%; max-width: none; }
 .scalio-context-label { display: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
 @media (min-width: 1024px) { .scalio-context-label { display: inline; } }
 .scalio-context-field { position: relative; min-width: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/nav.js

@@ -190,7 +190,9 @@ function NavDrawer({ open, onClose, children, lang, labels, testId }) {
 
 // Whole frame: switcher, header, banners, then sidebar + content. The same sidebar element is shown
 // inside the drawer on phones (variant "drawer", closes on navigation).
-function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onDrawerClose, lang, labels, testId }) {
+// drawerTop: shown above the navigation in the phone drawer, e.g. the context select (the header hides it
+// below 640px, there is no room next to the header buttons).
+function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onDrawerClose, drawerTop, lang, labels, testId }) {
   return h(
     "div",
     { className: "scalio-shell", "data-testid": testId || "app-shell" },
@@ -207,7 +209,7 @@ function AppShell({ switcher, header, banner, sidebar, children, drawerOpen, onD
       ? h(
           NavDrawer,
           { open: !!drawerOpen, onClose: onDrawerClose, lang, labels },
-          React.cloneElement(sidebar, { variant: "drawer", onNavigate: onDrawerClose })
+          React.cloneElement(sidebar, drawerTop ? { variant: "drawer", onNavigate: onDrawerClose, top: drawerTop } : { variant: "drawer", onNavigate: onDrawerClose })
         )
       : null
   );