fix: mobile UI (#2569)

* improve mobile ui

* general cleanup

* cleanup, improvements

* fix hydration mismatch

src/app/components/Base/Dialog.vue

@@ -18,7 +18,7 @@
         >
           <slot name="description" />
         </DialogDescription>
-        <div class="mt-6 flex justify-end gap-2">
+        <div class="mt-6 flex flex-wrap justify-end gap-2">
           <slot name="actions" />
         </div>
       </DialogContent>

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/ClientCard/Name.vue

@@ -1,11 +1,9 @@
 <template>
   <div
-    class="text-sm text-gray-700 md:text-base dark:text-neutral-200"
+    class="break-all text-sm text-gray-700 md:text-base dark:text-neutral-200"
     :title="$t('client.createdOn') + $d(new Date(client.createdAt))"
   >
-    <span class="border-b-2 border-t-2 border-transparent">
     {{ client.name }}
-    </span>
   </div>
 </template>
 

src/app/components/Clients/Empty.vue

@@ -3,7 +3,7 @@
     {{ $t('client.empty') }}<br /><br />
     <ClientsCreateDialog>
       <BaseSecondaryButton as="span">
-        <IconsPlus class="w-4 md:mr-2" />
+        <IconsPlus class="mr-2 w-4" />
         <span class="text-sm">{{ $t('client.new') }}</span>
       </BaseSecondaryButton>
     </ClientsCreateDialog>

src/app/components/Clients/New.vue

@@ -1,8 +1,8 @@
 <template>
   <ClientsCreateDialog>
     <BaseSecondaryButton as="span">
-      <IconsPlus class="w-4 md:mr-2" />
-      <span class="text-sm max-md:hidden">{{ $t('client.newShort') }}</span>
+      <IconsPlus class="mr-2 w-4" />
+      <span class="text-sm">{{ $t('client.newShort') }}</span>
     </BaseSecondaryButton>
   </ClientsCreateDialog>
 </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/Clients/Sort.vue

@@ -1,11 +1,8 @@
 <template>
   <BasePrimaryButton @click="toggleSort">
-    <IconsArrowDown
-      v-if="globalStore.sortClient === true"
-      class="w-4 md:mr-2"
-    />
-    <IconsArrowUp v-else class="w-4 md:mr-2" />
-    <span class="text-sm max-md:hidden"> {{ $t('client.sort') }}</span>
+    <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>
   </BasePrimaryButton>
 </template>
 

src/app/components/Form/ArrayField.vue

@@ -12,23 +12,15 @@
           class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
           @input="update($event, i)"
         />
-        <BaseSecondaryButton
-          as="input"
-          type="button"
-          class="rounded-lg"
-          value="-"
-          @click="del(i)"
-        />
+        <BaseSecondaryButton type="button" class="rounded-lg" @click="del(i)">
+          {{ '-' }}
+        </BaseSecondaryButton>
       </div>
     </div>
     <div class="mt-2">
-      <BasePrimaryButton
-        as="input"
-        type="button"
-        class="rounded-lg"
-        :value="$t('form.add')"
-        @click="add"
-      />
+      <BasePrimaryButton type="button" class="rounded-lg" @click="add">
+        {{ $t('form.add') }}
+      </BasePrimaryButton>
     </div>
   </div>
 </template>

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/NullArrayField.vue

@@ -12,23 +12,15 @@
           class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
           @input="update($event, i)"
         />
-        <BaseSecondaryButton
-          as="input"
-          type="button"
-          class="rounded-lg"
-          value="-"
-          @click="del(i)"
-        />
+        <BaseSecondaryButton type="button" class="rounded-lg" @click="del(i)">
+          {{ '-' }}
+        </BaseSecondaryButton>
       </div>
     </div>
     <div class="mt-2">
-      <BasePrimaryButton
-        as="input"
-        type="button"
-        class="rounded-lg"
-        :value="$t('form.add')"
-        @click="add"
-      />
+      <BasePrimaryButton type="button" class="rounded-lg" @click="add">
+        {{ $t('form.add') }}
+      </BasePrimaryButton>
     </div>
   </div>
 </template>

src/app/components/Form/SwitchField.vue

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

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/components/Panel/Panel.vue

@@ -1,7 +1,9 @@
 <template>
+  <div class="container mx-auto max-w-3xl">
     <div
-    class="container mx-auto max-w-3xl overflow-hidden rounded-lg bg-white px-3 text-gray-700 shadow-md md:px-0 dark:bg-neutral-700 dark:text-neutral-200"
+      class="mx-3 overflow-hidden rounded-lg bg-white text-gray-700 shadow-md dark:bg-neutral-700 dark:text-neutral-200"
     >
       <slot />
     </div>
+  </div>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-shrink-0 items-center space-x-2">
+  <div class="flex flex-shrink-0 flex-col items-center gap-2 sm:flex-row">
     <slot />
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-auto flex-grow flex-row items-center border-b-2 border-gray-100 p-3 px-5 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 text-2xl font-medium">
-    {{ text }}
+  <h2 class="flex-1 break-all text-2xl font-medium">
+    <slot />
   </h2>
 </template>
-
-<script setup lang="ts">
-const { text } = defineProps<{
-  text: string;
-}>();
-</script>

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

@@ -2,13 +2,18 @@
   <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">
+        <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">
-            <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">
+            </PanelHeadTitle>
+          </PanelHead>
+          <PanelBody>
+            <nav class="flex flex-col gap-2">
               <NuxtLink
                 v-for="(item, index) in menuItems"
                 :key="index"
@@ -23,14 +28,21 @@
                   {{ item.name }}
                 </BaseSecondaryButton>
               </NuxtLink>
-          </div>
+            </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>
+          <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 />
+          <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">