docs: dashboard example of custom pages and the custom Vue skill switch columns by container width instead of screen width AdminForth/2005

Author: ivictbor

adminforth/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>
 

adminforth/design/system-concepts.md

@@ -35,7 +35,7 @@ Below `sm` (640px) a Dialog or Modal docks to the bottom edge as a sheet: full w
 
 ## 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:`.
+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:`. Such a grid gets `grid-cols-1` as its base, otherwise a wide chart or table stretches its single column past the page.
 
 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.
 

documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -14,10 +14,10 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
 
 ```html title="./custom/Dashboard.vue"
 <template>
-  <div class="px-4 py-4 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-screen">
+  <div class="@container px-4 py-4 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-screen">
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
+    <div class="grid grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4 gap-4">
+      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 @xl:p-5 min-h-[340px]" v-if="data">
         <div class="mb-2">
           <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalAparts }}</h5>
           <p class="text-base font-normal text-gray-500 dark:text-gray-400">{{  $t('Apartment last 7 days | Apartments last 7 days', data.totalAparts) }}</p>
@@ -44,7 +44,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
         />
       </div>
 
-      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
+      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 @xl:p-5 min-h-[340px]" v-if="data">
         <p class="text-base font-normal text-gray-500 dark:text-gray-400 mb-3 text-center">
           {{ $t('Top countries') }}
         </p>
@@ -69,7 +69,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
       </div>
       </div>
 
-      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 lg:row-span-2 xl:col-span-2 min-h-[700px]" v-if="data">
+      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 @xl:p-5 @4xl:row-span-2 @6xl:col-span-2 min-h-[700px]" v-if="data">
         <div class="grid grid-cols-2 py-3 gap-4 text-center">
           <dl>
             <dt class="text-base font-normal text-gray-500 dark:text-gray-400 pb-1">
@@ -130,7 +130,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
 
       </div>
 
-      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
+      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 @xl:p-5 min-h-[340px]" v-if="data">
         <p class="text-base font-normal text-gray-500 dark:text-gray-400 mb-3 text-center">{{ $t('Apartment by rooms') }}</p>
         <div class="flex justify-center items-center">
         <PieChart
@@ -155,7 +155,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
       </div>
       </div>
 
-      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5 min-h-[340px]" v-if="data">
+      <div class="w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 @xl:p-5 min-h-[340px]" v-if="data">
         <p class="text-base font-normal text-gray-500 dark:text-gray-400 mb-3 text-center">{{ $t('Unlisted vs Listed price' ) }}</p>
 
         <AreaChart 
@@ -269,6 +269,8 @@ onMounted(async () => {
 </script>
 ```
 
+> ☝️ The grid follows the width of the page content, not of the screen: the sidebar and the agent panel take part of it. `@container` on the root makes it a size container, `@xl:`, `@4xl:` and `@6xl:` switch the columns by its width.
+
 > ☝️ use https://flowbite.com/ to get pre-designed tailwind design blocks for your pages
 
 Now let's add this page to the AdminForth menu and make it homepage instead of Apartments page: