From cd9db1563df47099b2089ad8b6182906a6072cd4 Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Tue, 7 Apr 2026 11:34:49 +0200
Subject: [PATCH] fix: mobile UI (#2569)

* improve mobile ui

* general cleanup

* cleanup, improvements

* fix hydration mismatch
---
 src/app/components/Base/Dialog.vue           |  2 +-
 src/app/components/ClientCard/ClientCard.vue |  2 +-
 src/app/components/ClientCard/ExpireDate.vue |  4 +-
 src/app/components/ClientCard/Name.vue       |  6 +-
 src/app/components/Clients/Empty.vue         |  2 +-
 src/app/components/Clients/New.vue           |  4 +-
 src/app/components/Clients/Search.vue        |  2 +-
 src/app/components/Clients/Sort.vue          |  9 +--
 src/app/components/Form/ArrayField.vue       | 20 ++-----
 src/app/components/Form/Heading.vue          |  4 +-
 src/app/components/Form/Label.vue            |  6 +-
 src/app/components/Form/NullArrayField.vue   | 20 ++-----
 src/app/components/Form/SwitchField.vue      |  4 +-
 src/app/components/Header/Logo.vue           |  2 +-
 src/app/components/Header/Update.vue         |  2 +-
 src/app/components/Panel/Panel.vue           | 10 ++--
 src/app/components/Panel/head/Boat.vue       |  2 +-
 src/app/components/Panel/head/Head.vue       |  2 +-
 src/app/components/Panel/head/Title.vue      | 10 +---
 src/app/layouts/default.vue                  |  6 +-
 src/app/pages/admin.vue                      | 60 ++++++++++++--------
 src/app/pages/clients/[id].vue               |  4 +-
 src/app/pages/index.vue                      | 10 +++-
 src/app/pages/me.vue                         |  4 +-
 24 files changed, 97 insertions(+), 100 deletions(-)

diff --git a/src/app/components/Base/Dialog.vue b/src/app/components/Base/Dialog.vue
index c6d6db5f..d3689552 100644
--- a/src/app/components/Base/Dialog.vue
+++ b/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>
diff --git a/src/app/components/ClientCard/ClientCard.vue b/src/app/components/ClientCard/ClientCard.vue
index e5732bf0..b60f44d6 100644
--- a/src/app/components/ClientCard/ClientCard.vue
+++ b/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" />
diff --git a/src/app/components/ClientCard/ExpireDate.vue b/src/app/components/ClientCard/ExpireDate.vue
index 3d8e1e04..293b8692 100644
--- a/src/app/components/ClientCard/ExpireDate.vue
+++ b/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>
diff --git a/src/app/components/ClientCard/Name.vue b/src/app/components/ClientCard/Name.vue
index 435db786..54c92a33 100644
--- a/src/app/components/ClientCard/Name.vue
+++ b/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>
+    {{ client.name }}
   </div>
 </template>
 
diff --git a/src/app/components/Clients/Empty.vue b/src/app/components/Clients/Empty.vue
index e5f38da2..e667ba8c 100644
--- a/src/app/components/Clients/Empty.vue
+++ b/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>
diff --git a/src/app/components/Clients/New.vue b/src/app/components/Clients/New.vue
index 9fa45d0d..6837f13f 100644
--- a/src/app/components/Clients/New.vue
+++ b/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>
diff --git a/src/app/components/Clients/Search.vue b/src/app/components/Clients/Search.vue
index 94ebbe46..1f862b67 100644
--- a/src/app/components/Clients/Search.vue
+++ b/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"
diff --git a/src/app/components/Clients/Sort.vue b/src/app/components/Clients/Sort.vue
index 82e89f2a..e6db6db4 100644
--- a/src/app/components/Clients/Sort.vue
+++ b/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>
 
diff --git a/src/app/components/Form/ArrayField.vue b/src/app/components/Form/ArrayField.vue
index 497949ca..fd0c2e22 100644
--- a/src/app/components/Form/ArrayField.vue
+++ b/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>
diff --git a/src/app/components/Form/Heading.vue b/src/app/components/Form/Heading.vue
index 999639a7..3d403114 100644
--- a/src/app/components/Form/Heading.vue
+++ b/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>
diff --git a/src/app/components/Form/Label.vue b/src/app/components/Form/Label.vue
index 90f4804b..d26df8e4 100644
--- a/src/app/components/Form/Label.vue
+++ b/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>
diff --git a/src/app/components/Form/NullArrayField.vue b/src/app/components/Form/NullArrayField.vue
index 5061e9f9..343252c0 100644
--- a/src/app/components/Form/NullArrayField.vue
+++ b/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>
diff --git a/src/app/components/Form/SwitchField.vue b/src/app/components/Form/SwitchField.vue
index 43eaf3f8..3175d8d5 100644
--- a/src/app/components/Form/SwitchField.vue
+++ b/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>
diff --git a/src/app/components/Header/Logo.vue b/src/app/components/Header/Logo.vue
index 05f79050..3450b924 100644
--- a/src/app/components/Header/Logo.vue
+++ b/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"
diff --git a/src/app/components/Header/Update.vue b/src/app/components/Header/Update.vue
index a00d83a8..a8ea565c 100644
--- a/src/app/components/Header/Update.vue
+++ b/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">
diff --git a/src/app/components/Panel/Panel.vue b/src/app/components/Panel/Panel.vue
index 19756224..b7950a70 100644
--- a/src/app/components/Panel/Panel.vue
+++ b/src/app/components/Panel/Panel.vue
@@ -1,7 +1,9 @@
 <template>
-  <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"
-  >
-    <slot />
+  <div class="container mx-auto max-w-3xl">
+    <div
+      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>
diff --git a/src/app/components/Panel/head/Boat.vue b/src/app/components/Panel/head/Boat.vue
index 7bb2cffe..ac042c80 100644
--- a/src/app/components/Panel/head/Boat.vue
+++ b/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>
diff --git a/src/app/components/Panel/head/Head.vue b/src/app/components/Panel/head/Head.vue
index e1737af3..4d4b80be 100644
--- a/src/app/components/Panel/head/Head.vue
+++ b/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>
diff --git a/src/app/components/Panel/head/Title.vue b/src/app/components/Panel/head/Title.vue
index 93a2db31..8b942722 100644
--- a/src/app/components/Panel/head/Title.vue
+++ b/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>
diff --git a/src/app/layouts/default.vue b/src/app/layouts/default.vue
index 2bc05c1f..8ec4ed6a 100644
--- a/src/app/layouts/default.vue
+++ b/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 />
diff --git a/src/app/pages/admin.vue b/src/app/pages/admin.vue
index 48f30f21..0f880b76 100644
--- a/src/app/pages/admin.vue
+++ b/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>
diff --git a/src/app/pages/clients/[id].vue b/src/app/pages/clients/[id].vue
index 5c419326..f4714ea9 100644
--- a/src/app/pages/clients/[id].vue
+++ b/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">
diff --git a/src/app/pages/index.vue b/src/app/pages/index.vue
index 3a02179d..4b36b399 100644
--- a/src/app/pages/index.vue
+++ b/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>
 
diff --git a/src/app/pages/me.vue b/src/app/pages/me.vue
index 0ef5210d..65c68ae9 100644
--- a/src/app/pages/me.vue
+++ b/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">