improve mobile ui

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

src/app/components/Clients/Sort.vue

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

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

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>

src/app/pages/index.vue

@@ -5,8 +5,10 @@
         <PanelHeadTitle :text="$t('pages.clients')" />
         <PanelHeadBoat>
           <ClientsSearch />
+          <div class="flex gap-2">
             <ClientsSort />
             <ClientsNew />
+          </div>
         </PanelHeadBoat>
       </PanelHead>