src/components/FormModel.vue

@@ -122,8 +122,10 @@ 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">
+    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md" id="formModel">
-        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
+        <QCard>
+            <slot name="form" :data="formData" :validate="validate" :filter="filter" />
+        </QCard>
     </QForm>
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <div v-if="$props.defaultActions">
@@ -156,10 +158,12 @@ watch(formUrl, async () => {
         color="primary"
     />
 </template>
-
+<style lang="scss" scoped>
-<style lang="scss" scopped>
+#formModel {
-.formModel {
     max-width: 800px;
     width: 100%;
 }
+.q-card {
+    padding: 32px;
+}
 </style>

src/components/ui/VnRow.vue

@@ -0,0 +1,13 @@
+<script></script>
+<template>
+    <div id="row">
+        <slot></slot>
+    </div>
+</template>
+<style lang="scss" scopped>
+@media screen and (max-width: 800px) {
+    #row {
+        flex-direction: column;
+    }
+}
+</style>

src/pages/Claim/Card/ClaimBasicData.vue

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -99,7 +100,7 @@ const statesFilter = {
             model="claim"
         >
             <template #form="{ data, validate, filter }">
-                <vnRow class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.client.name"
@@ -136,8 +137,8 @@ const statesFilter = {
                             </template>
                         </QInput>
                     </div>
-                </vnRow>
+                </VnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QSelect
                             v-model="data.workerFk"
@@ -183,8 +184,8 @@ const statesFilter = {
                         >
                         </QSelect>
                     </div>
-                </vnRow>
+                </VnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model.number="data.packages"
@@ -200,15 +201,15 @@ const statesFilter = {
                             :rules="validate('claim.rma')"
                         />
                     </div>
-                </vnRow>
+                </VnRow>
-                <vnRow class="row q-gutter-md q-mb-md">
+                <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasToPickUp"
                             :label="t('claim.basicData.picked')"
                         />
                     </div>
-                </vnRow>
+                </VnRow>
             </template>
         </FormModel>
     </div>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
 const route = useRoute();
 const { t } = useI18n();
 const session = useSession();