general cleanup

src/app/components/ClientCard/ClientCard.vue

@@ -9,7 +9,7 @@
         <div class="flex flex-grow flex-col gap-1">
           <ClientCardName :client="client" />
           <div
-            class="flex flex-col pb-1 text-xs text-gray-500 md:inline-block md:pb-0 dark:text-neutral-400"
+            class="flex flex-col text-xs text-gray-500 dark:text-neutral-400"
           >
             <div>
               <ClientCardAddress :client="client" />

src/app/components/ClientCard/ExpireDate.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="block pb-1 text-xs text-gray-500 md:inline-block md:pb-0 dark:text-neutral-400"
-  >
+  <div class="block text-xs text-gray-500 dark:text-neutral-400">
     <span class="inline-block">{{ expiredDateFormat(client.expiresAt) }}</span>
   </div>
 </template>

src/app/components/Clients/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-60 md:mr-2">
+  <div class="relative">
     <div class="relative flex h-full items-center">
       <IconsMagnifyingGlass
         class="absolute left-2.5 h-4 w-4 text-gray-400 dark:text-neutral-500"

src/app/components/Form/Heading.vue

@@ -1,10 +1,10 @@
 <template>
-  <h4 class="col-span-full flex items-center py-6 text-2xl">
+  <h3 class="col-span-full flex items-center py-6 text-2xl">
     <slot />
     <BaseTooltip v-if="description" :text="description">
       <IconsInfo class="size-4" />
     </BaseTooltip>
-  </h4>
+  </h3>
 </template>
 
 <script lang="ts" setup>

src/app/components/Form/Label.vue

@@ -1,7 +1,7 @@
 <template>
-  <RLabel :for="props.for" class="md:align-middle md:leading-10"
-    ><slot
-  /></RLabel>
+  <RLabel :for="props.for" class="md:leading-[2.75rem]">
+    <slot />
+  </RLabel>
 </template>
 
 <script lang="ts" setup>

src/app/components/Form/SwitchField.vue

@@ -7,7 +7,9 @@
       <IconsInfo class="size-4" />
     </BaseTooltip>
   </div>
-  <BaseSwitch :id="id" v-model="data" />
+  <div class="my-auto">
+    <BaseSwitch :id="id" v-model="data" />
+  </div>
 </template>
 
 <script lang="ts" setup>

src/app/components/Panel/head/Head.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-auto flex-grow flex-col items-center gap-2 border-b-2 border-gray-100 p-3 px-5 sm:flex-row dark:border-neutral-600"
+    class="flex flex-col items-center gap-2 border-b-2 border-gray-100 p-3 px-5 sm:flex-row dark:border-neutral-600"
   >
     <slot />
   </div>

src/app/components/Panel/head/Title.vue

@@ -1,11 +1,5 @@
 <template>
   <h2 class="flex-1 break-all text-2xl font-medium">
-    {{ text }}
+    <slot />
   </h2>
 </template>
-
-<script setup lang="ts">
-const { text } = defineProps<{
-  text: string;
-}>();
-</script>

src/app/pages/admin.vue

@@ -2,13 +2,17 @@
   <div>
     <div class="container mx-auto p-4">
       <div class="flex flex-col gap-4 lg:flex-row">
-        <div class="rounded-lg bg-white p-4 lg:w-64 dark:bg-neutral-700">
-          <NuxtLink to="/admin">
-            <h2 class="mb-4 text-xl font-bold dark:text-neutral-200">
-              {{ t('pages.admin.panel') }}
-            </h2>
-          </NuxtLink>
-          <div class="flex flex-col space-y-2">
+        <div
+          class="overflow-hidden rounded-lg bg-white text-gray-700 shadow-md lg:w-64 dark:bg-neutral-700 dark:text-neutral-200"
+        >
+          <PanelHead>
+            <PanelHeadTitle>
+              <NuxtLink to="/admin">
+                {{ t('pages.admin.panel') }}
+              </NuxtLink>
+            </PanelHeadTitle>
+          </PanelHead>
+          <div class="flex flex-col space-y-2 p-4">
             <NuxtLink
               v-for="(item, index) in menuItems"
               :key="index"
@@ -27,10 +31,16 @@
         </div>
 
         <div
-          class="flex-1 rounded-lg bg-white p-6 dark:bg-neutral-700 dark:text-neutral-200"
+          class="flex-1 overflow-hidden rounded-lg bg-white text-gray-700 shadow-md dark:bg-neutral-700 dark:text-neutral-200"
         >
-          <h1 class="mb-6 text-3xl font-bold">{{ activeMenuItem.name }}</h1>
-          <NuxtPage />
+          <PanelHead>
+            <PanelHeadTitle>
+              {{ activeMenuItem.name }}
+            </PanelHeadTitle>
+          </PanelHead>
+          <section class="p-6">
+            <NuxtPage />
+          </section>
         </div>
       </div>
     </div>

src/app/pages/clients/[id].vue

@@ -2,7 +2,9 @@
   <main v-if="data">
     <Panel>
       <PanelHead>
-        <PanelHeadTitle :text="data.name" />
+        <PanelHeadTitle>
+          {{ data.name }}
+        </PanelHeadTitle>
       </PanelHead>
       <PanelBody>
         <FormElement @submit.prevent="submit">

src/app/pages/index.vue

@@ -2,7 +2,9 @@
   <main>
     <Panel>
       <PanelHead>
-        <PanelHeadTitle :text="$t('pages.clients')" />
+        <PanelHeadTitle>
+          {{ $t('pages.clients') }}
+        </PanelHeadTitle>
         <PanelHeadBoat>
           <ClientsSearch />
           <div class="flex gap-2">

src/app/pages/me.vue

@@ -2,7 +2,9 @@
   <main>
     <Panel>
       <PanelHead>
-        <PanelHeadTitle :text="$t('pages.me')" />
+        <PanelHeadTitle>
+          {{ $t('pages.me') }}
+        </PanelHeadTitle>
       </PanelHead>
       <PanelBody class="dark:text-neutral-200">
         <FormElement @submit.prevent="submit">