@scalio-cloud/ui 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,16 +1,22 @@
 # Changelog
 
+## 0.18.1
+Page actions after Markus' feedback (2026-10-31, UISPEC section 2 "Page actions"). 0.18.0 was released before these
+changes were merged; apps use 0.18.1.
+- The slot is shown only when a page has actions and pushes the menu down; no reserved room, no separator line.
+- 0.25rem above the buttons, 0.875rem from the last button to the next section heading (half the usual gap).
+- Only Übersicht (first item of a first section without heading) is pinned; further items of that section stay in
+  the menu (Pulse: Geräte).
+- Buttons in the slot: same height (2.25rem), one line, long labels end with "…". Labels without "Neu" (README).
+- **Visible change:** only in apps that set `pageActions`. No token changes.
+
 ## 0.18.0
-Page actions in the sidebar (Markus 2026-10-31, reference Scalio Kontor; scalio-docs ADR 0042 Nachtrag).
+Page actions in the sidebar, first version (Markus 2026-10-31, reference Scalio Kontor; scalio-docs ADR 0042 Nachtrag).
 - New `react/actions.js`: `PageActions` puts a page's actions (Neu …, Import, Zurück) into a fixed slot in the
-  sidebar right below Übersicht from 768px; on phones they stay in the page header. `ActionSlot` for apps with their
-  own sidebar, `useDesktop()` (768px, same as the sidebar).
-- `Sidebar` gets `pageActions`: Übersicht (first section without heading) is pinned on top, then the slot, then the
-  other sections. The slot keeps room for two buttons when empty, so the menu never moves. Not in the phone drawer.
-- CSS (`nav.css`): `.scalio-sidebar-pinned`, `.scalio-action-slot`, `.scalio-side-actions` (buttons stacked, full
-  width). `shell.css`: an empty `.scalio-page-actions` is hidden.
-- `react-dom` is an optional peer dependency (for the portal; every app has it).
-- **Visible change:** none until an app sets `pageActions` and wraps its actions in `PageActions`. No token changes.
+  sidebar right below Übersicht from 768px; on phones they stay in the page header. `ActionSlot`, `useDesktop()`.
+- `Sidebar` gets `pageActions`: Übersicht pinned on top, then the slot (room for two buttons, line below), then the
+  sections. `shell.css`: an empty `.scalio-page-actions` is hidden. `react-dom` is an optional peer dependency.
+- **Visible change:** none until an app sets `pageActions`. No token changes.
 
 ## 0.17.0
 Scalio Pulse is built (scalio-docs ADR 0043, P1 started 2026-10-31).

package/README.md

@@ -130,16 +130,17 @@ on top. An app with two work areas (Nexus Identity and HR) puts `<WorkspaceSwitc
 into the sidebar's `top`.
 
 **Page actions in the sidebar** (from 0.18.0, UISPEC section 2): `<Sidebar pageActions ... />` keeps Übersicht (the
-first section without a heading) on top and adds a fixed slot right below it. A page wraps its actions in
-`<PageActions>`; from 768px they move into the slot, on phones they stay in the page header. The slot keeps room for
-two buttons even when a page has none, so the menu never moves.
+first item of a first section without heading) on top and adds a slot right below it. A page wraps its actions in
+`<PageActions>`; from 768px they move into the slot, on phones they stay in the page header. The slot takes no
+room on pages without actions; with actions it pushes the menu down.
 
 ```jsx
-<PageHeader title="Kontakte" actions={<PageActions><Button onClick={add}><Plus /> Neuer Kontakt</Button></PageActions>} />
+<PageHeader title="Kontakte" actions={<PageActions><Button onClick={add}><Plus /> Kontakt</Button></PageActions>} />
 <PageHeader title={doc.number} actions={<PageActions><Button variant="outline" asChild><Link to="/invoices"><ArrowLeft /> Zurück</Link></Button></PageActions>} />
 ```
 
 Only actions that start something or lead away go there (Neu …, Import, Scannen, Zurück), at most two per page.
+Labels without "Neu"/"New": the + icon says it ("+ Kontakt", not "+ Neuer Kontakt").
 Filters, search, tabs and Speichern stay on the page. Apps with their own sidebar place `<ActionSlot />` themselves.
 
 ## Settings page (React)

package/nav.css

@@ -17,16 +17,23 @@
 .scalio-sidebar-top { padding: 0.75rem 0.75rem 0; }
 .scalio-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 0 0.75rem; }
 .scalio-nav-section + .scalio-nav-section { margin-top: 0.25rem; }
-/* Page actions (react/actions.js): Übersicht stays on top, then a fixed slot for the page's actions. The slot
-   keeps room for two buttons even when empty, so the menu below never moves. */
+/* Page actions (react/actions.js): Übersicht stays on top, then the slot for the page's actions. The slot takes no
+   room when a page has no actions; with actions it shows them and pushes the menu down. No separator line. */
 .scalio-sidebar-pinned { flex-shrink: 0; padding-top: 0.5rem; }
-.scalio-action-slot {
-  flex-shrink: 0; box-sizing: border-box; min-height: 6.25rem; margin: 0 0.75rem; padding: 0.5rem 0 0.75rem;
-  border-bottom: 1px solid hsl(var(--border));
-}
+.scalio-action-slot { flex-shrink: 0; margin: 0 0.75rem; }
 .scalio-sidebar-scroll.has-action-slot { padding-top: 0; }
-.scalio-side-actions, .scalio-side-actions > div { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
-.scalio-side-actions > :not(div), .scalio-side-actions > div > * { width: 100%; justify-content: center; }
+.scalio-side-actions, .scalio-side-actions > div { display: flex; flex-direction: column; align-items: stretch; gap: 0.375rem; }
+.scalio-side-actions { padding-top: 0.25rem; }
+/* Below the buttons: half the usual space before the next heading (0.875rem instead of 1.75rem), a little room
+   before a plain menu item. */
+.scalio-action-slot:has(.scalio-side-actions:not(:empty)) + .scalio-sidebar-scroll > .scalio-nav-section:first-child > .scalio-nav-heading { padding-top: 0.875rem; }
+.scalio-action-slot:has(.scalio-side-actions:not(:empty)) + .scalio-sidebar-scroll > .scalio-nav-section:first-child:not(:has(> .scalio-nav-heading)) { padding-top: 0.375rem; }
+.scalio-side-actions:empty { display: none; }
+/* Same height for every button (2.25rem), one line; a long label is cut with "…". */
+.scalio-side-actions > :not(div), .scalio-side-actions > div > * {
+  box-sizing: border-box; width: 100%; height: 2.25rem; min-height: 0; margin: 0; justify-content: center;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
 .scalio-side-actions input[type="file"], .scalio-side-actions [hidden] { display: none; }
 .scalio-nav-heading {
   padding: 1.25rem 1.25rem 0.5rem; font-size: 11px; font-weight: 700; text-transform: uppercase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.18.0",
+  "version": "0.18.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/actions.js

@@ -1,7 +1,7 @@
 "use strict";
 // Page actions in the sidebar (UISPEC section 2, "Seitenaktionen", from 0.18.0). Buttons such as "Neu ...",
-// "Import" or "Zurück" sit in a fixed slot right below Übersicht, close to the navigation, instead of far
-// right in the page header. The slot keeps its height when a page has no actions, so the menu never moves.
+// "Import" or "Zurück" sit right below Übersicht, close to the navigation, instead of far right in the page
+// header. The slot takes no room when a page has no actions; with actions it pushes the menu down.
 // Phones have no sidebar: there the actions stay in the page header.
 //
 // The app turns the slot on with <Sidebar pageActions />; a page wraps its actions in <PageActions>.

package/react/nav.js

@@ -102,8 +102,8 @@ function SearchButton({ search, lang, labels, testIdPrefix, onNavigate }) {
 
 // Sidebar. variant "desktop" shows from 768px, "drawer" is the same content inside NavDrawer.
 // link: the router's NavLink (gets to, end, className(fn), onClick); without it plain <a> + activePath.
-// pageActions: a fixed slot for the page's actions (react/actions.js) right below Übersicht, desktop only.
-// Übersicht (the first section when it has no heading) then stays on top and does not scroll.
+// pageActions: a slot for the page's actions (react/actions.js) right below Übersicht, desktop only.
+// Übersicht (first item of the first section when it has no heading) then stays on top and does not scroll.
 function Sidebar(props) {
   const {
     nav, link, activePath, top, search, primaryAction, footer, version, commit, lang, labels,
@@ -113,8 +113,10 @@ function Sidebar(props) {
   const L = labelsFor(lang, labels);
   const sections = visibleSections(nav);
   const slot = !!pageActions && variant !== "drawer";
-  const pinned = slot && sections.length && !sections[0].label ? sections[0] : null;
-  const rest = pinned ? sections.slice(1) : sections;
+  // Only Übersicht (first item of a first section without heading) is pinned; the rest of that section scrolls.
+  const first = sections[0];
+  const pinned = slot && first && !first.label ? Object.assign({}, first, { items: first.items.slice(0, 1) }) : null;
+  const rest = !pinned ? sections : first.items.length > 1 ? [Object.assign({}, first, { items: first.items.slice(1) })].concat(sections.slice(1)) : sections.slice(1);
   const section = (sec, i) =>
     h(
       "div",