cleanup, improvements

src/app/components/Clients/Sort.vue

@@ -2,7 +2,7 @@
   <BasePrimaryButton @click="toggleSort">
     <IconsArrowDown v-if="globalStore.sortClient === true" class="mr-2 w-4" />
     <IconsArrowUp v-else class="mr-2 w-4" />
-    <span class="text-sm"> {{ $t('client.sort') }}</span>
+    <span class="text-sm">{{ $t('client.sort') }}</span>
   </BasePrimaryButton>
 </template>
 

src/app/components/Header/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink to="/" class="mb-4">
+  <NuxtLink to="/" class="max-sm:mb-4">
     <h1 class="text-4xl font-medium dark:text-neutral-200">
       <img
         src="/logo.png"

src/app/components/Header/Update.vue

@@ -5,7 +5,7 @@
       authStore.userData &&
       hasPermissions(authStore.userData, 'admin', 'any')
     "
-    class="font-small mb-10 rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
+    class="font-small rounded-md bg-red-800 p-4 text-sm text-white shadow-lg dark:bg-red-100 dark:text-red-600"
     :title="`v${globalStore.information.currentRelease} → v${globalStore.information.latestRelease.version}`"
   >
     <div class="container mx-auto flex flex-auto flex-row items-center">

src/app/layouts/default.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <header class="mx-auto mt-4 flex max-w-3xl flex-col justify-center">
+    <header
+      class="mx-auto my-4 flex max-w-3xl flex-col justify-center max-md:px-3"
+    >
       <div
         class="mb-5 w-full"
         :class="
@@ -17,7 +19,7 @@
           <UiUserMenu v-if="loggedIn" />
         </div>
       </div>
-      <HeaderUpdate class="mt-4" />
+      <HeaderUpdate class="my-4" />
     </header>
     <slot />
     <UiFooter />

src/app/pages/admin.vue

@@ -12,22 +12,24 @@
               </NuxtLink>
             </PanelHeadTitle>
           </PanelHead>
-          <div class="flex flex-col space-y-2 p-4">
-            <NuxtLink
-              v-for="(item, index) in menuItems"
-              :key="index"
-              :to="`/admin/${item.id}`"
-              class="group rounded"
-              active-class="bg-red-800 active"
-            >
-              <BaseSecondaryButton
-                as="span"
-                class="w-full font-medium group-[.active]:text-white"
+          <PanelBody>
+            <nav class="flex flex-col gap-2">
+              <NuxtLink
+                v-for="(item, index) in menuItems"
+                :key="index"
+                :to="`/admin/${item.id}`"
+                class="group rounded"
+                active-class="bg-red-800 active"
               >
-                {{ item.name }}
-              </BaseSecondaryButton>
-            </NuxtLink>
-          </div>
+                <BaseSecondaryButton
+                  as="span"
+                  class="w-full font-medium group-[.active]:text-white"
+                >
+                  {{ item.name }}
+                </BaseSecondaryButton>
+              </NuxtLink>
+            </nav>
+          </PanelBody>
         </div>
 
         <div
@@ -38,9 +40,9 @@
               {{ activeMenuItem.name }}
             </PanelHeadTitle>
           </PanelHead>
-          <section class="p-6">
+          <PanelBody>
             <NuxtPage />
-          </section>
+          </PanelBody>
         </div>
       </div>
     </div>