fix: update CSS to use 'dvh' units for responsive height adjustments

Author: NoOne7135

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -736,12 +736,12 @@ $grColor5: #695BE9;
     -moz-osx-font-smoothing: grayscale;
     // gradient with color spots
     animation: gradient 15s ease infinite;
-    min-height: 100vh;
+    min-height: 100dvh;
   }
   body {
     margin: 0;
     padding: 0;
-    max-height: 100vh;
+    max-height: 100dvh;
     overflow: overlay;
     background-image: radial-gradient(
   circle farthest-corner at top left, $grColor1 0%, rgba(225, 243, 97,0) 50%),

adminforth/servers/express.ts

@@ -76,7 +76,7 @@ const respondNoServer = (title, explanation) => {
           display: flex;
           justify-content: center;
           align-items: center;
-          height: 100vh;
+          height: 100dvh;
           flex-direction: column;
         }
       </style>

adminforth/spa/src/components/Filters.vue

@@ -6,7 +6,7 @@
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"
-      :style="{ height: `calc(100vh ` }"
+      :style="{ height: `calc(100dvh ` }"
   >
     <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">
       {{ $t('Filters') }}

adminforth/spa/src/views/ResourceParent.vue

@@ -1,6 +1,6 @@
 <template>
   <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4 flex" 
-    :class="limitHeightToPage ? 'h-[calc(100vh-3.5rem)]': undefined"
+    :class="limitHeightToPage ? 'h-[calc(100dvh-3.5rem)]': undefined"
   >
     <RouterView/>
   </div>

dev-demo/custom/Dash.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4 py-4 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-[calc(100vh-55px)] ">
+  <div class="px-4 py-4 bg-blue-50 dark:bg-gray-900 dark:shadow-none min-h-[calc(100dvh-55px)] ">
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
       <div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data" >