refs #6118 fixResponsive

src/components/FormModel.vue

@@ -107,8 +107,14 @@ 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">
-        <slot name="form" :data="formData" :validate="validate" :filter="filter"></slot>
+    <QForm v-if="formData" @submit="save" @reset="reset" class="q-pa-md formModel">
+        <QCard class="q-pa-lg">
+            <slot
+                name="form"
+                :data="formData"
+                :validate="validate"
+                :filter="filter"
+            ></slot>
             <div class="q-mt-lg">
                 <slot name="actions">
                     <QBtn :label="t('globals.save')" type="submit" color="primary" />
@@ -122,6 +128,7 @@ watch(formUrl, async () => {
                     />
                 </slot>
             </div>
+        </QCard>
     </QForm>
     <SkeletonForm v-if="!formData" />
     <QInnerLoading
@@ -130,3 +137,16 @@ watch(formUrl, async () => {
         color="primary"
     />
 </template>
+
+<style lang="scss">
+@media screen and (max-width: 800px) {
+    .q-card > div {
+        flex-direction: column;
+    }
+}
+
+.formModel {
+    max-width: 800px;
+    width: 100%;
+}
+</style>

src/css/app.scss

@@ -14,12 +14,6 @@ a {
     color: $orange-4;
 }
 
-@media screen and (max-width: $width-md) {
-    .q-form > div {
-        flex-direction: column;
-    }
-}
-
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {

src/css/quasar.variables.scss

@@ -48,12 +48,4 @@ $dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 $spacing-md: 16px;
 
-// Width from Salix variables.scss
-
-$width-xs: 400px;
-$width-sm: 544px;
-$width-md: 800px;
-$width-lg: 1280px;
-$width-xl: 1600px;
-
 $width-full: 100%;

src/pages/Claim/Card/ClaimBasicData.vue

@@ -92,7 +92,6 @@ const statesFilter = {
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
 
     <div class="column items-center">
-        <QCard>
         <FormModel
             :url="`Claims/${route.params.id}`"
             :url-update="`Claims/updateClaim/${route.params.id}`"
@@ -122,10 +121,7 @@ const statesFilter = {
                                         transition-show="scale"
                                         transition-hide="scale"
                                     >
-                                            <QDate
-                                                v-model="data.created"
-                                                mask="YYYY-MM-DD"
-                                            >
+                                        <QDate v-model="data.created" mask="YYYY-MM-DD">
                                             <div class="row items-center justify-end">
                                                 <QBtn
                                                     v-close-popup
@@ -215,6 +211,5 @@ const statesFilter = {
                 </div>
             </template>
         </FormModel>
-        </QCard>
     </div>
 </template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -59,7 +59,6 @@ const filterOptions = {
         auto-load
     />
     <div class="column items-center">
-        <QCard>
         <FormModel :url="`Clients/${route.params.id}`" model="customer">
             <template #form="{ data, validate, filter }">
                 <div class="row q-gutter-md q-mb-md">
@@ -134,8 +133,7 @@ const filterOptions = {
                             map-options
                             use-input
                             @filter="
-                                    (value, update) =>
-                                        filter(value, update, filterOptions)
+                                (value, update) => filter(value, update, filterOptions)
                             "
                             :rules="validate('client.salesPersonFk')"
                             :input-debounce="0"
@@ -167,13 +165,5 @@ const filterOptions = {
                 </div>
             </template>
         </FormModel>
-        </QCard>
     </div>
 </template>
-
-<style lang="scss" scoped>
-.q-card {
-    width: $width-full;
-    max-width: $width-md;
-}
-</style>