feat: list header follows its own width: filters from beforeActionButtons take a full row under the title and buttons on narrow screens and share one row from 896px, bulk actions of checked rows get a row of their own AdminForth/2005

Author: ivictbor

adminforth/design/system-concepts.md

@@ -33,6 +33,12 @@ A disabled control gets the native `disabled` attribute (`aria-disabled` on a li
 
 Below `sm` (640px) a Dialog or Modal docks to the bottom edge as a sheet: full width, 16px top corners, actions stacked full width with the last (main) one on top. Width classes an app passes (`class="w-96"`) apply from `sm` up. The panel and footer classes live in `afcl/dialogStyles.ts`, so an overlay built on `Modal` gets the sheet without extra code.
 
+## Container width, not viewport width
+
+A page gets less than the screen: the sidebar and the agent panel squeeze it on wide screens too. Layouts which stack follow their container with Tailwind container queries (`@container` on the parent, `@4xl:` on children), not the viewport with `md:` or `lg:`.
+
+The header of the list page is a container named `header`. Below 896px (`@4xl/header`) components from `beforeActionButtons` take a full row under the title and the buttons, from 896px all share one row. Below 512px (`@lg/header`) Home and Filter keep only their icons. Such a component fills its row and takes a fixed width from `@4xl/header:`, like the fields of quick-filters. Bulk actions of checked rows take a row of their own above the table, so the buttons next to the title never move.
+
 ## Lucide icons
 
 - Use Lucide: `@iconify-prerendered/vue-lucide` in components (`IconPencil`, `IconTrash2`), `lucide:<name>` in config (`icon: 'lucide:download'`).

adminforth/design/system.html

@@ -169,9 +169,6 @@
 .seg > button.is-on { background: var(--surface-3); color: var(--text); }
 .seg > button .i { color: var(--muted); }
 .seg > button.is-on .i { color: var(--text); }
-.seg-pill { display: inline-flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--surface-3); }
-.seg-pill > button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; }
-.seg-pill > button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(24, 24, 27, .06); }
 
 /* links */
 .link { color: var(--accent-fg); text-decoration: none; font-weight: 500; }
@@ -251,6 +248,25 @@
 .badge-muted { background: var(--surface-2); border-color: transparent; color: var(--muted); }
 .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
 
+/* list page header: a container, so it follows its own width and not the viewport (the sidebar and the agent panel squeeze it too).
+   Narrow: title and buttons in a row, filters in a full row under them. From 512px: Home and Filter labels. From 896px: one row. */
+.lh { container: header / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 36px; }
+.lh-title { flex: 1 1 0; min-width: 96px; display: flex; align-items: center; gap: 8px; }
+.lh-title .t-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lh-filters { order: 1; flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px; }
+.lh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.lh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.lh-filter { padding: 0 8px; }
+@container header (min-width: 512px) {
+  .lh-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
+  .lh-filter { padding: 0 12px; }
+}
+@container header (min-width: 896px) {
+  .lh-filters { order: 0; flex: 0 1 auto; display: flex; flex-wrap: wrap; margin-left: auto; }
+  .lh-filters .select { width: 192px; }
+  .lh-filters label.input { width: 256px; }
+}
+
 /* cards & tables */
 .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
 .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
@@ -779,50 +795,38 @@ <h2 class="ds-board-title"><span>Screens</span>List view</h2>
   </header>
 
   <main class="af-content-wrapper" style="flex: 1; padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0">
-    <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px">
-      <nav aria-label="Breadcrumb" style="display: flex; align-items: center; gap: 8px">
+    <!-- the header follows its own width: filters take a full row under the title and the buttons, from 896px all share one row -->
+    <div class="lh">
+      <nav class="lh-title" aria-label="Breadcrumb">
         <a class="link-muted t-sm" href="#" style="display: inline-flex; align-items: center; gap: 6px">
           <svg class="i i-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>
-          Home
+          <span class="lh-label">Home</span>
         </a>
         <span style="color: var(--faint)">/</span>
         <h1 class="t-title">Car - SQLite</h1>
       </nav>
-      <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px">
-        
+      <div class="lh-filters">
+        <button class="input select" type="button" aria-haspopup="listbox" style="font: inherit; font-size: 14px; text-align: left"><span class="ph">Price</span><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button>
+        <label class="input">
+          <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
+          <input type="text" placeholder="Model" aria-label="Model">
+        </label>
+      </div>
+      <div class="lh-actions">
         <a class="btn btn-primary af-create-button" href="#create">
           <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
           Create
         </a>
-        <button class="btn btn-secondary af-filter-button" type="button" >
+        <button class="btn btn-secondary af-filter-button lh-filter" type="button" >
           <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18"></path><path d="M7 12h10"></path><path d="M10 18h4"></path></svg>
-          Filter
-          
+          <span class="lh-label">Filter</span>
         </button>
         <button class="btn btn-secondary btn-icon" type="button" aria-label="More actions">
           <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
         </button>
       </div>
     </div>
 
-    <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 8px">
-      <label class="input" style="width: 300px; max-width: 100%">
-        <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
-        <input type="text" placeholder="Search by model" aria-label="Model">
-      </label>
-      <div class="seg-pill" role="group" aria-label="Price">
-        
-          <button class="is-on" type="button" >Any price</button>
-        
-          <button class="" type="button" >Budget-Friendly</button>
-        
-          <button class="" type="button" >Mid-Range</button>
-        
-          <button class="" type="button" >Premium</button>
-        
-      </div>
-    </div>
-
     <div class="tbl-box">
       <div class="tbl-scroll">
         <div class="dt" role="table" aria-label="Cars">

adminforth/spa/src/components/Breadcrumbs.vue

@@ -1,25 +1,26 @@
 <template>
   <nav class="flex items-center min-h-[2.25rem]" aria-label="Breadcrumb">
-      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse flex-wrap">
-        <li class="inline-flex items-center">
+      <ol class="flex min-w-0 items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+        <li class="inline-flex shrink-0 items-center">
           <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm text-lightBreadcrumbsHomepageText hover:text-lightBreadcrumbsHomepageTextHover dark:text-darkBreadcrumbsHomepageText dark:hover:text-darkBreadcrumbsHomepageTextHover">
-            <IconHouse class="w-3.5 h-3.5 me-1.5" aria-hidden="true" />
-            {{ $t('Home') }}
+            <IconHouse class="w-3.5 h-3.5 @lg/header:me-1.5" aria-hidden="true" />
+            <!-- a narrow header keeps only the house, the label stays for screen readers -->
+            <span class="sr-only @lg/header:not-sr-only">{{ $t('Home') }}</span>
           </RouterLink>
         </li>
-        <li>
+        <li class="min-w-0">
           <div class="flex items-center">
-            <IconChevronRight class="rtl:rotate-180 w-3.5 h-3.5 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-0.5" aria-hidden="true" />
-            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="md:ms-1"
+            <IconChevronRight class="shrink-0 rtl:rotate-180 w-3.5 h-3.5 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-0.5" aria-hidden="true" />
+            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="md:ms-1 truncate"
               :class="$route.params.primaryKey
                 ? 'text-sm text-lightBreadcrumbsHomepageText hover:text-lightBreadcrumbsHomepageTextHover dark:text-darkBreadcrumbsHomepageText dark:hover:text-darkBreadcrumbsHomepageTextHover'
                 : 'text-xl leading-7 font-semibold tracking-tight text-lightBreadcrumbsText dark:text-darkBreadcrumbsText'">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
           </div>
         </li>
 
-        <li v-if="$route.params.primaryKey">
+        <li v-if="$route.params.primaryKey" class="min-w-0">
           <div class="flex items-center">
-            <IconChevronRight class="rtl:rotate-180 w-3.5 h-3.5 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-0.5" aria-hidden="true" />
+            <IconChevronRight class="shrink-0 rtl:rotate-180 w-3.5 h-3.5 text-lightBreadcrumbsArrowIcon dark:text-darkBreadcrumbsArrowIcon mx-0.5" aria-hidden="true" />
             <span class="ms-1 text-xl leading-7 font-semibold tracking-tight text-lightBreadcrumbsText md:ms-1 dark:text-darkBreadcrumbsText
               max-w-80 truncate">
               {{ $route.name === 'resource-edit' ? $t('Edit') : $t('Show') }} {{ coreStore.record?._label }}</span>

adminforth/spa/src/components/BreadcrumbsWithButtons.vue

@@ -1,9 +1,21 @@
 <template>
   <div>
-    <div class="flex items-center justify-between mb-4 flex-wrap gap-y-2 gap-2">
-      <Breadcrumbs />
-      <div class="flex items-center gap-2 flex-wrap gap-y-1">
-        <slot></slot>
+    <!-- the header follows its own width, not the viewport, because the sidebar and the agent panel squeeze it too -->
+    <div class="@container/header mb-4">
+      <div class="flex flex-wrap items-center gap-3">
+        <!-- a record title of show and edit takes the room it needs and the buttons go under it, a resource title gives way to the buttons -->
+        <Breadcrumbs :class="$route.params.primaryKey ? 'min-w-0 flex-auto' : 'min-w-24 flex-1'" />
+        <!-- filters take a full row under the title and the buttons, a wide header keeps all in one row -->
+        <div v-if="$slots.filters" class="order-last basis-full flex flex-wrap items-center gap-2 @4xl/header:order-none @4xl/header:basis-auto @4xl/header:ms-auto">
+          <slot name="filters"></slot>
+        </div>
+        <!-- actions for the checked rows get a row of their own above the table, so the buttons next to the title stay in place -->
+        <div v-if="$slots.selection" class="order-last basis-full flex flex-wrap items-center gap-2">
+          <slot name="selection"></slot>
+        </div>
+        <div class="flex items-center gap-2 flex-wrap">
+          <slot></slot>
+        </div>
       </div>
     </div>
     <div v-if="coreStore.resourceColumnsError" >
@@ -13,12 +25,12 @@
 
 </template>
 
-<script setup>
-import Breadcrumbs from '@/components/Breadcrumbs.vue'; 
+<script setup lang="ts">
+import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import PageNotFound from '@/views/PageNotFound.vue';
 
 import { useCoreStore } from '@/stores/core';
 
 const coreStore = useCoreStore();
 
-</script>
+</script>

adminforth/spa/src/views/ListView.vue

@@ -21,19 +21,20 @@
     />
 
     <BreadcrumbsWithButtons>
-      <template v-if="isResourceReady">
+      <template v-if="isResourceReady && beforeActionButtons.length" #filters>
         <component 
-          v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeActionButtons as AdminForthComponentDeclaration[] || []"
+          v-for="c in beforeActionButtons"
           :is="getCustomComponent(formatComponent(c))"
           :meta="(c as AdminForthComponentDeclarationFull).meta"
           :resource="coreStore.resource"
           :adminUser="coreStore.adminUser"
           :checkboxes="checkboxes"
           :clearCheckboxes="clearCheckboxes"
         />
+      </template>
+      <template v-if="isResourceReady && checkboxes.length" #selection>
         <Button
           @click="()=>{checkboxes = []}"
-          v-if="checkboxes.length"
           data-tooltip-target="tooltip-remove-all"
           variant="secondary"
           iconOnly
@@ -47,11 +48,9 @@
         </Button>
 
         <div 
-          v-if="checkboxes.length"
-          v-for="(action,i) in coreStore.resource?.options?.bulkActions" 
+          v-for="(action,i) in coreStore.resource?.options?.bulkActions?.filter(a => !a.showInThreeDotsDropdown)" 
         >
           <Button
-            v-if="!action.showInThreeDotsDropdown"
             :key="action.id"
             @click="startBulkActionInner(action.id!)"
             class="h-[2.125rem] px-2.5"
@@ -73,7 +72,6 @@
           </Button>
         </div>
         <div
-          v-if="checkboxes.length"
           v-for="(action,i) in coreStore.resource?.options?.actions?.filter(a => a.showIn?.bulkButton)" 
         >
           <Button
@@ -93,7 +91,8 @@
               {{ `${action.name} (${checkboxes.length})` }}
           </Button>
         </div>
-
+      </template>
+      <template v-if="isResourceReady">
         <LinkButton v-if="coreStore.resource?.options?.allowedActions?.create"
           :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
           class="af-create-button h-[2.125rem] px-2.5"
@@ -103,13 +102,14 @@
         </LinkButton>
 
         <Button
-          class="af-filter-button h-[2.125rem] px-3 py-3"
+          class="af-filter-button h-[2.125rem] px-2 py-3 @lg/header:px-3"
           @click="()=>{filtersShow = !filtersShow}"
           v-if="coreStore.resource?.options?.allowedActions?.filter"
           variant="secondary"
         >
           <IconListFilter class="w-4 h-4"/>
-          <span>{{ $t('Filter') }}</span>
+          <!-- a narrow header keeps only the icon, the label stays for screen readers -->
+          <span class="sr-only @lg/header:not-sr-only">{{ $t('Filter') }}</span>
           <div v-if="filtersStore.visibleFiltersCount" class="flex items-center gap-1 ms-1">
             <span class="inline-flex items-center justify-center min-w-[1.125rem] h-[1.125rem] px-1 rounded-full text-[11px] font-semibold tabular-nums bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast">
                 {{ filtersStore.visibleFiltersCount }}
@@ -232,6 +232,7 @@ const route = useRoute();
 
 // previous resource stays in the store until the new one is applied, its injections must not render here
 const isResourceReady = computed(() => coreStore.resource?.resourceId === route.params.resourceId);
+const beforeActionButtons = computed(() => (coreStore.resourceOptions?.pageInjections?.list?.beforeActionButtons || []) as AdminForthComponentDeclaration[]);
 
 const page = ref(1);
 const columnsMinMax = ref({});

documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -758,7 +758,7 @@ Notes and tips:
 
 ## List table beforeActionButtons
 
-`beforeActionButtons` allows injecting one or more compact components into the header bar of the list page, directly to the left of the default action buttons (`Create`, `Filter`, bulk actions, three‑dots menu). Use it for small inputs (quick search, toggle, status chip) rather than large panels.
+`beforeActionButtons` allows injecting one or more compact components into the header bar of the list page, next to the default action buttons (`Create`, `Filter`, three‑dots menu). Use it for small inputs (quick search, toggle, status chip) rather than large panels.
 
 ![alt text](<Group 5.png>)
 
@@ -798,6 +798,32 @@ beforeActionButtons: [
 
 > ☝️ Keep these components visually light; wide or tall content should use `afterBreadcrumbs` or `bottom` instead.
 
+### Narrow screens
+
+The header lays out by its own width, not by the width of the screen, because the sidebar and the agent panel take space too:
+
+- below 896px the injected components take a full row under the title and the buttons;
+- from 896px the title, the injected components and the buttons share one row, the components stand to the left of the buttons.
+
+Buttons of bulk actions show up in a row of their own above the table when rows are checked, so they never push the components or the buttons around.
+
+The header is a Tailwind [size container](https://github.com/tailwindlabs/tailwindcss-container-queries) named `header`, so a component can follow it with `@4xl/header:` variants. For example, a search input fills its row on a narrow header and gets a fixed width in the single row of a wide one:
+
+```html title="./custom/UniversalQuickSearch.vue"
+<template>
+  <div class="w-full @4xl/header:w-64">
+    <Input v-model="term" fullWidth :placeholder="$t('Search')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Input } from '@/afcl';
+
+const term = ref('');
+</script>
+```
+
 ## List table custom
 
 ## Global Injections