src/components/FormModel.vue

@@ -122,11 +122,24 @@ watch(formUrl, async () => {
         <QIcon name="warning" size="md" class="q-mr-md" />
         <span>{{ t('globals.changesToSave') }}</span>
     </QBanner>
-    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md" id="formModel">
+    <div class="column items-center">
+        <QForm
+            v-if="formData"
+            @submit="save"
+            @reset="reset"
+            class="q-pa-md"
+            id="formModel"
+        >
             <QCard>
-            <slot name="form" :data="formData" :validate="validate" :filter="filter" />
+                <slot
+                    name="form"
+                    :data="formData"
+                    :validate="validate"
+                    :filter="filter"
+                />
             </QCard>
         </QForm>
+    </div>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">

src/pages/Claim/Card/ClaimBasicData.vue

@@ -91,8 +91,6 @@ const statesFilter = {
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
-
-    <div class="column items-center">
     <FormModel
         :url="`Claims/${route.params.id}`"
         :url-update="`Claims/updateClaim/${route.params.id}`"
@@ -149,9 +147,7 @@ const statesFilter = {
                         :label="t('claim.basicData.assignedTo')"
                         map-options
                         use-input
-                            @filter="
-                                (value, update) => filter(value, update, workerFilter)
-                            "
+                        @filter="(value, update) => filter(value, update, workerFilter)"
                         :rules="validate('claim.claimStateFk')"
                         :input-debounce="0"
                     >
@@ -176,9 +172,7 @@ const statesFilter = {
                         :label="t('claim.basicData.state')"
                         map-options
                         use-input
-                            @filter="
-                                (value, update) => filter(value, update, statesFilter)
-                            "
+                        @filter="(value, update) => filter(value, update, statesFilter)"
                         :rules="validate('claim.claimStateFk')"
                         :input-debounce="0"
                     >
@@ -212,5 +206,4 @@ const statesFilter = {
             </VnRow>
         </template>
     </FormModel>
-    </div>
 </template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -59,7 +59,7 @@ const filterOptions = {
         @on-fetch="(data) => (businessTypes = data)"
         auto-load
     />
-    <div class="column items-center">
+
     <FormModel :url="`Clients/${route.params.id}`" model="customer">
         <template #form="{ data, validate, filter }">
             <vnRow class="row q-gutter-md q-mb-md">
@@ -133,9 +133,7 @@ const filterOptions = {
                         :label="t('customer.basicData.salesPerson')"
                         map-options
                         use-input
-                            @filter="
-                                (value, update) => filter(value, update, filterOptions)
-                            "
+                        @filter="(value, update) => filter(value, update, filterOptions)"
                         :rules="validate('client.salesPersonFk')"
                         :input-debounce="0"
                     >
@@ -166,5 +164,4 @@ const filterOptions = {
             </vnRow>
         </template>
     </FormModel>
-    </div>
 </template>