Изменила сетки форм

src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue

@@ -9,10 +9,10 @@
     :save="saveChange",
     :cancel="cancelEdit"
   )
-    q-form.form-wrap.gap-24.w-full(ref="insuranceForm", :no-error-focus="true")
-      .flex.flex-col.gap-4(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
+    q-form.form-wrap.gap-6.w-full(ref="insuranceForm", :no-error-focus="true")
+      .flex.flex-col.gap-2(v-for="insurance in insuranceConfig", :key="insurance.insuranceKey")
         .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(
+        .flex.w-full.items-center.gap-4(
           v-for="field in insurance.fields",
           :key="insurance.insuranceKey + field.key",
           :style="{marginTop: field.label === 'Документы' ? '20px' : null}"
@@ -49,8 +49,8 @@
                 v-model="insuranceData[photoId][field.key]"
                 :confirm-upload="confirmChangePhoto"
               )
-          .category.flex.h-10.relative.gap-x-2(v-else-if="field.type === 'select'")
-            .category-select.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
+          .flex.h-10.relative.gap-x-2.w-full(v-else-if="field.type === 'select'")
+            .w-full.flex.items-center.change.px-4.rounded {{selectCategory(basic[insurance.insuranceKey][field.key])}}
             q-btn.change.flex.w-7.h-9.rounded-md(
               v-if="isEdit",
               @click="openModalCategories",
@@ -80,12 +80,13 @@
               span(
                 :style="{color: 'var(--font-dark-blue-color)'}"
               ) {{"\xa0" + basic?.benefit[insurance?.discount] + "%"}}
-          .input-container.flex.flex-col.relative(v-else)
+          .w-full.flex.flex-col.relative(v-else)
             base-input(
               v-model="insuranceData[insurance.insuranceKey][field.key]",
               @update:model-value="checkChangeInput",
               :readonly="!isEdit",
               size="M",
+              width="100%",
               :name="insurance.insuranceKey + ':' + field.key",
               :rule="[(val) => checkFields(val, insurance.insuranceKey, field.rules)]"
             )
@@ -355,9 +356,6 @@ export default {
 .avatar
   height: 100%
 
-.input-container
-  width: 302px
-
 .replace-photo
   color: var(--btn-blue-color)
 
@@ -365,14 +363,12 @@ export default {
   display: grid
   grid-template-columns: repeat(3, 1fr)
   grid-template-rows: repeat(1, 1fr)
-  @media(max-width: 1900px)
+  @media(max-width: 1440px)
     grid-template-columns: repeat(2, 1fr)
-    grid-template-rows: repeat(2, 1fr)
-  @media(max-width: 1320px)
-    grid-template-columns: repeat(1, 1fr)
-    grid-template-rows: repeat(3, 1fr)
+    grid-template-rows: 1.2fr 0.8fr
 
 .label-field
+  min-width: 110px
   color: var(--font-grey-color)
 
 .q-badge
@@ -382,12 +378,6 @@ export default {
 .delete
   background-color: var(--btn-red-color)
 
-.category
-  width: 324px
-
-.category-select
-  min-width: 276px
-
 .icon :deep(path)
   fill: var(--font-grey-color)