small screen fix

src/components/base/BaseInput.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
+  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: widthInternal, ...sizeVariable}")
     q-input.input(
       v-model="value",
       :name="name",
@@ -24,7 +24,7 @@
       :shadow-text="shadowText",
       :autofocus="autofocus",
       hide-bottom-space
-      :error="error"
+      :error="error",
       @focus="e => $emit('focus', e)"
     )
       template(v-slot:prepend, v-if="iconLeft")
@@ -69,7 +69,7 @@ export default {
     shadowText: String,
     mask: String,
     debounce: [String, Number],
-    width: Number,
+    width: [String, Number],
     rule: Array,
     lazyRule: [Boolean, String],
     itemAligned: Boolean,
@@ -153,6 +153,10 @@ export default {
         "--py": "8px 0",
       };
     },
+    widthInternal() {
+      if (typeof this.width === "number") return this.width + "px";
+      return this.width;
+    },
   },
 };
 </script>

src/components/base/BaseInputDate.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+  base-input-container.gap-y-2(:label="label", :style="{width: widthInternal, ...sizeVariable }")
     q-input.input(
       v-model="value",
       :name="name",
@@ -57,7 +57,7 @@ export default {
       default: "none",
     },
     debounce: [String, Number],
-    width: Number,
+    width: [String, Number],
     lazyRule: [Boolean, String],
     itemAligned: Boolean,
     rule: Function,
@@ -135,6 +135,11 @@ export default {
           };
       }
     },
+
+    widthInternal() {
+      if (typeof this.width === "number") return this.width + "px";
+      return this.width;
+    },
   },
   methods: {
     convertISOFormat(date) {

src/components/base/BaseSelect.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    base-input-container(:label="label", :style="{width: width, ...sizeVariable}")
+    base-input-container(:label="label", :style="{width: widthInternal, ...sizeVariable}")
       q-select.select(
         ref="selectRef"
         v-model="value",
@@ -159,6 +159,10 @@ export default {
             : !!this.value?.label,
       };
     },
+    widthInternal() {
+      if (typeof this.width === "number") return this.width + "px";
+      return this.width;
+    },
   },
   methods: {
     updateInputValue(value, noFilter) {

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

@@ -8,10 +8,10 @@
     :cancel="cancelEdit"
     :open-edit="openEdit"
     )
-    q-form.form-wrap.gap-24.w-full(ref="formBasicData")
+    q-form.form-wrap.gap-6.w-full(ref="formBasicData")
       .flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
-        .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
+        .flex.w-full.items-center.gap-4(v-for="field in data.fields")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
           .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
@@ -37,15 +37,16 @@
               :standout="!isEdit"
               :items="genderOptions"
               bg-color="#e9e9f6",
+              width="100%",
               size="M"
             )
           base-input-date(
             v-else-if="field.type === 'date'",
             v-model="basic[data.dataKey][field.key]",
             size="M",
-            readonly
+            width="100%",
-            @update:model-value="checkChangeInput",
+            readonly,
-            :width="302"
+            @update:model-value="checkChangeInput"
           )
           base-input(
             v-else,
@@ -54,7 +55,7 @@
             @update:model-value="checkChangeInput"
             :type="field.type"
             :name="field.key"
-            :width="302",
+            width="100%",
             size="M",
             :rule="field.rules"
           )
@@ -211,9 +212,7 @@ export default {
 
 <style lang="sass" scoped>
 .select
-  width: 302px
+  width: 100%
-.avatar-field
-  min-width: 302px
 .avatar
   height: 100%
   border-radius: 50%
@@ -223,12 +222,10 @@ export default {
   display: grid
   grid-template-columns: repeat(3, 1fr)
   grid-template-rows: repeat(1, 1fr)
-  @media(max-width: 1900px)
-    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)
 .label-field
+  min-width: 110px
   color: var(--font-grey-color)
 </style>