adminforth 4.2.0 → 4.3.0

package/commands/createApp/templates/.agents/skills/adminforth-custom-vue/SKILL.md.hbs

@@ -51,6 +51,10 @@ not wait for a follow-up prompt about styling or dark mode.
 8. **Never build Tailwind class names dynamically.** `custom/` is copied into the SPA sources and scanned
    statically by Tailwind, so `` `text-${color}-600` `` produces no CSS. Write full class strings and pick
    between them.
+9. **Layouts follow their container, not the screen.** The sidebar and the agent panel take part of the
+   screen, so a page or panel which splits into columns is a Tailwind size container: `@container` on its
+   root and `@md:`, `@4xl:` variants on the grid instead of `md:`, `lg:`. Give the grid `grid-cols-1` as its
+   base, otherwise a wide chart or table stretches the single column past the page.
 
 ## Dark Theme Self-Check
 
@@ -121,9 +125,11 @@ custom/
 
 ```vue
 <template>
-  <section class="grid gap-4 md:grid-cols-2">
-    <OrdersTotals :record="record" />
-    <OrdersFilters :meta="meta" />
+  <section class="@container">
+    <div class="grid grid-cols-1 gap-4 @2xl:grid-cols-2">
+      <OrdersTotals :record="record" />
+      <OrdersFilters :meta="meta" />
+    </div>
   </section>
 </template>
 

package/dist/spa/src/afcl/VerticalTabs.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="md:flex">
-    <div :class="mergeClasses('md:me-4 mb-4 md:mb-0 mr-6 md:mr-0 md:min-w-[11rem]', tabsClass)">
+  <div class="afcl-vertical-tabs md:flex">
+    <div :class="mergeClasses('afcl-vertical-tabs-list mb-4 md:mb-0 md:me-6 md:self-start md:min-w-[11rem] p-1 rounded-lg border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground', tabsClass)">
       <slot name="tabs-header"></slot>
       <ul class="space-y-0.5 text-sm">
         <li v-for="tab in tabs" :key="`${tab}-tab-controll`">
@@ -19,7 +19,7 @@
         </li>
       </ul>
     </div>
-    <div :class="mergeClasses('w-full md:ps-6 md:border-s md:border-lightFormBorder dark:md:border-darkFormBorder text-sm text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText', contentClass)">
+    <div :class="mergeClasses('afcl-vertical-tabs-content w-full text-sm text-lightVerticalTabsSlotText dark:text-darkVerticalTabsSlotText', contentClass)">
       <slot :name="activeTab"></slot>
     </div>
   </div>
@@ -35,7 +35,7 @@ import { mergeClasses } from './classMerge';
   const props = withDefaults(defineProps<{
     activeTab?: string;
     hideTabesWhenSingle?: boolean;
-    // override the default classes of the tab list column and of the content, e.g. paddings or the divider
+    // override the default classes of the tab list column and of the content, e.g. margins or the frame of the column
     tabsClass?: ClassNameValue;
     contentClass?: ClassNameValue;
   }>(), {

package/dist/spa/src/views/SettingsView.vue

@@ -10,8 +10,8 @@
       ref="VerticalTabsRef"
       v-model:active-tab="activeTab"
       class="flex flex-col @4xl:flex-row @4xl:min-h-[40rem] overflow-hidden rounded-xl border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
-      tabsClass="m-0 md:m-0 @4xl:w-64 shrink-0 px-3 py-4 @4xl:py-5 border-b @4xl:border-b-0 @4xl:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
-      contentClass="min-w-0 overflow-x-auto p-6 md:border-s-0"
+      tabsClass="m-0 md:m-0 md:self-stretch @4xl:w-64 shrink-0 px-3 py-4 @4xl:py-5 rounded-none border-0 border-b @4xl:border-b-0 @4xl:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
+      contentClass="min-w-0 overflow-x-auto p-6"
       @update:active-tab="setURL({slug: $event, pageLabel: ''})"
     >
       <template #tabs-header>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",