Some Corrections For Mobile

components/EntityEdit.vue

@@ -21,6 +21,9 @@ const props = defineProps({
   },
   inModal: {
     type: Boolean,
+  },
+  platform: {
+    type: String,
   }
 })
 
@@ -233,6 +236,9 @@ const updateItem = async () => {
       v-if="!props.inModal"
       :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
   >
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
     <template #left>
       <UButton
           icon="i-heroicons-chevron-left"
@@ -245,11 +251,12 @@ const updateItem = async () => {
     <template #center>
       <h1
           v-if="item"
-          :class="['text-xl','font-medium']"
+          :class="['text-xl','font-medium', 'text-center']"
       >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
     </template>
     <template #right>
       <ButtonWithConfirm
+          v-if="platform !== 'mobile'"
           color="rose"
           variant="outline"
           @confirmed="dataStore.updateItem(type,{...item,archived: true}, oldItem)"
@@ -279,7 +286,7 @@ const updateItem = async () => {
       <UButton
           @click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
           color="red"
-          class="ml-2"
+          class="ml-1"
       >
         Abbrechen
       </UButton>
@@ -323,10 +330,10 @@ const updateItem = async () => {
     <UForm
         class="p-5"
     >
-      <div class="flex flex-row">
+      <div :class="platform ===  'mobile' ?['flex','flex-col'] : ['flex','flex-row']">
         <div
             v-for="(columnName,index) in dataType.inputColumns"
-            :class="['w-1/2', ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
+            :class="platform === 'mobile' ? ['w-full'] : [`w-1/${dataType.inputColumns.length}`, ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
         >
           <UDivider>{{columnName}}</UDivider>