fix: settings put the tabs above the page by the width of the card instead of the viewport, so the open sidebar and agent panel no longer squeeze the page AdminForth/2005

Author: ivictbor

adminforth/spa/package-lock.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.19",
     "@tsconfig/node20": "^20.1.4",
     "@types/lodash.debounce": "^4.0.9",

adminforth/spa/package.json

@@ -1,16 +1,17 @@
 <template>
-  <div class="h-full w-full px-4 py-6 md:px-10" :class="{ 'hidden': initialTabSet === false }">
+  <div class="@container h-full w-full px-4 py-6 md:px-10" :class="{ 'hidden': initialTabSet === false }">
     <div v-if="!visiblePages.length">
       <p>{{ $t('No setting pages configured or still loading...') }}</p>
     </div>
-    <!-- settings are one card: tabs on a tinted pane at the left, the page of the active tab at the right -->
+    <!-- settings are one card: tabs on a tinted pane at the left, the page of the active tab at the right.
+         The card stacks them by its own width, not by the viewport, because the sidebar and the agent panel take the width too -->
     <VerticalTabs
       v-else
       ref="VerticalTabsRef"
       v-model:active-tab="activeTab"
-      class="md:min-h-[40rem] overflow-hidden rounded-xl border border-lightCardBorder bg-lightCardBackground dark:border-darkCardBorder dark:bg-darkCardBackground"
-      tabsClass="m-0 md:m-0 md:w-64 md:shrink-0 px-3 py-4 md:py-5 border-b md:border-b-0 md:border-e border-lightCardBorder dark:border-darkCardBorder bg-lightVerticalTabsBackground dark:bg-darkVerticalTabsBackground"
-      contentClass="min-w-0 overflow-x-auto p-5 md:py-6 md:ps-7 md:pe-7 md:border-s-0"
+      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"
       @update:active-tab="setURL({slug: $event, pageLabel: ''})"
     >
       <template #tabs-header>

adminforth/spa/pnpm-lock.yaml

@@ -16,5 +16,7 @@ export default {
   darkMode: 'class',
   plugins: [
     require('@tailwindcss/typography'),
+    // `@container` on a parent, `@4xl:flex-row` on children: layouts which follow the width of their parent, not of the viewport
+    require('@tailwindcss/container-queries'),
   ],
 }