From b45fa823ef4f8ba8dcff38573f71821372c1408f Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Thu, 2 Apr 2026 13:53:35 +0200
Subject: [PATCH] improve mobile ui

---
 src/app/components/Base/Dialog.vue      |  2 +-
 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/Sort.vue     |  9 +++------
 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 |  2 +-
 src/app/pages/index.vue                 |  6 ++++--
 10 files changed, 22 insertions(+), 23 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/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/Sort.vue b/src/app/components/Clients/Sort.vue
index 82e89f2a..dced5458 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/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..e6c8d86f 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-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"
   >
     <slot />
   </div>
diff --git a/src/app/components/Panel/head/Title.vue b/src/app/components/Panel/head/Title.vue
index 93a2db31..d3c4ffb3 100644
--- a/src/app/components/Panel/head/Title.vue
+++ b/src/app/components/Panel/head/Title.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 class="flex-1 text-2xl font-medium">
+  <h2 class="flex-1 break-all text-2xl font-medium">
     {{ text }}
   </h2>
 </template>
diff --git a/src/app/pages/index.vue b/src/app/pages/index.vue
index 3a02179d..bca9040d 100644
--- a/src/app/pages/index.vue
+++ b/src/app/pages/index.vue
@@ -5,8 +5,10 @@
         <PanelHeadTitle :text="$t('pages.clients')" />
         <PanelHeadBoat>
           <ClientsSearch />
-          <ClientsSort />
-          <ClientsNew />
+          <div class="flex gap-2">
+            <ClientsSort />
+            <ClientsNew />
+          </div>
         </PanelHeadBoat>
       </PanelHead>