src/components/FormModel.vue

@@ -138,13 +138,7 @@ watch(formUrl, async () => {
     />
 </template>
 
-<style lang="scss">
-@media screen and (max-width: 800px) {
-    .q-card > div {
-        flex-direction: column;
-    }
-}
-
+<style lang="scss" scopped>
 .formModel {
     max-width: 800px;
     width: 100%;

src/components/RowWrapper.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+<template>
+    <div class="q-pa-md example-row-equal-width"></div>
+</template>
+
+<style lang="scss" scoped>
+.formModel {
+    max-width: 800px;
+    width: 100%;
+}
+</style>

src/pages/Customer/Card/CustomerBasicData.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 RowWrapper from 'components/RowWrapper.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -61,7 +62,7 @@ const filterOptions = {
     <div class="column items-center">
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
-                <div class="row q-gutter-md q-mb-md">
+                <RowWrapper class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
                             v-model="data.socialName"
@@ -83,7 +84,7 @@ const filterOptions = {
                             :input-debounce="0"
                         />
                     </div>
-                </div>
+                </RowWrapper>
                 <div class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput