only improves

src/pages/medcards/TheMedcards.vue

@@ -16,4 +16,5 @@ export default {
 <style lang="sass">
 .medcards-wrapper
   width: calc(100vw - 72px)
+  overflow: hidden
 </style>

src/pages/medcards/components/MedicalCardSearch.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .medical-wrapper.rounded.h-full
-    list-header
+  .medical-wrapper.rounded
+    list-header(@search="getMedcards")
     list-contents
 </template>
 
@@ -10,11 +10,18 @@ import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue"
 export default {
   name: "MedicalCardSearch",
   components: { ListHeader, ListContents },
+  methods: {
+    getMedcards(value) {
+      console.log(value);
+    },
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .medical-wrapper
   background-color: var(--default-white)
+  display: flex
+  flex-direction: column
   overflow: hidden
 </style>

src/pages/medcards/components/MedicalCardSearchHeader.vue

@@ -36,7 +36,7 @@ export default {
     },
   },
   watch: {
-    filterString: debounce((value) => {
+    filterString: debounce(function (value) {
       this.$emit("search", value);
     }, 300),
   },

src/pages/medcards/components/MedicalCardSearchList.vue

@@ -1,20 +1,20 @@
 <template lang="pug">
-  .list-wrapper.rounded.w-full(id="listWrapper")
-    .w-full.header.h-10.flex
-      .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
-        v-for="field in headerConfig",
-        :key="field.title",
-        :style="headerStyle(field)"
-      ) {{ field.title }}
-      .h-full.w-8(v-if="scrollPresence")
-    .body.w-full
-      row(
-        v-for="medcard in medcardsInfo",
-        :key="medcard.id"
-        :scroll-presence="scrollPresence",
-        :header-style="headerStyle",
-        :medcard-info="medcard",
-      )
+  .scroll-wrapper
+    .list-wrapper.rounded.w-full(id="listWrapper")
+      .w-full.header.h-10.flex
+        .h-full.py-10px.px-4.flex.items-center.justify-start.font-semibold.text-sm.grey-color(
+          v-for="field in headerConfig",
+          :key="field.title",
+          :style="headerStyle(field)"
+        ) {{ field.title }}
+        .h-full.w-8(v-if="scrollPresence")
+      .body.w-full
+        row(
+          v-for="medcard in medcardsInfo",
+          :key="medcard.id"
+          :header-style="headerStyle",
+          :medcard-info="medcard",
+        )
 </template>
 
 <script>
@@ -57,13 +57,22 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.scroll-wrapper
+  flex-grow: 1
+  overflow-y: hidden
+.list-wrapper
+  overflow: hidden
+  height: 100%
+  display: flex
+  flex-direction: column
+  min-width: min-content
 .header
   background-color: var(--gray-thirdly)
   border-bottom: 1px solid var(--gray-secondary)
 .grey-color
   color: var(--font-grey-color)
 .body
-  overflow: auto
+  overflow-y: auto
   &::-webkit-scrollbar-track
     margin: 24px 0 24px 0
     background: #E9E9ED

src/pages/medcards/components/MedicalCardSearchRow.vue

@@ -2,7 +2,7 @@
   .w-full.row-wrapper.h-14.flex
     .field.gap-x-3(
       :style="headerStyle(headerConfig[0])"
-    ) 
+    )
       q-avatar(size="36px")
         img(:src="medcardInfo.avatar")
       span.font-semibold.text-dark {{patientName}}
@@ -39,7 +39,6 @@ export default {
   name: "MedicalCardSearchRow",
   components: { TheNotificationProvider },
   props: {
-    scrollPresence: Boolean,
     headerStyle: Function,
     medcardInfo: Object,
   },