fix: mobile UI (#2569)

* improve mobile ui

* general cleanup

* cleanup, improvements

* fix hydration mismatch

src/app/pages/admin.vue

@@ -2,35 +2,47 @@
   <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">
-            <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"
+        <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>
+          <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
-          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>
+          <PanelBody>
+            <NuxtPage />
+          </PanelBody>
         </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,11 +2,15 @@
   <main>
     <Panel>
       <PanelHead>
-        <PanelHeadTitle :text="$t('pages.clients')" />
+        <PanelHeadTitle>
+          {{ $t('pages.clients') }}
+        </PanelHeadTitle>
         <PanelHeadBoat>
           <ClientsSearch />
-          <ClientsSort />
-          <ClientsNew />
+          <div class="flex gap-2">
+            <ClientsSort />
+            <ClientsNew />
+          </div>
         </PanelHeadBoat>
       </PanelHead>
 

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">