updated virtual scroll list

src/components/cards/CardsOverview.svelte

@@ -14,16 +14,17 @@
   export let current_cards = [];
   $: filtered_cards = current_cards.filter(function (c) {
     if (
-      c.code.toLowerCase().includes(searchvalue.toLowerCase()) ||
-      c.runner?.firstname.toLowerCase().includes(searchvalue.toLowerCase()) ||
-      c.runner?.middlename.toLowerCase().includes(searchvalue.toLowerCase()) ||
-      c.runner?.lastname.toLowerCase().includes(searchvalue.toLowerCase()) ||
+      c.code.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
+      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
       should_display_based_on_id(c.id)
     ) {
       return true;
     }
   });
   $: searchvalue = "";
+  $: searchvalue_lowercase = searchvalue.toLowerCase();
   $: active_deletes = [];
   $: cards_show = current_cards.some((r) => r.is_selected === true);
   $: generate_cards = current_cards.filter((r) => r.is_selected === true);
@@ -57,7 +58,6 @@
     edit_modal_open = true;
   }
 // -----------------
-  export let wrapperHeight = "500px";
   let scrollTop = 0;
   $: rendered = filtered_cards;
   let innerHeight = 0;
@@ -121,7 +121,6 @@ table thead, table tbody tr {
             bind:cards_show
             bind:generate_cards />
         </div>
-        {rendered.length}
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">
@@ -165,7 +164,7 @@ table thead, table tbody tr {
           </thead>
           <tbody class="divide-y divide-gray-200 virtual-wrapper"
   on:scroll={updateScroll}
-  style="height: {wrapperHeight}; width:100%"
+  style="height: 70vh; width:100%"
   bind:this={ele}
           >
     {#each filtered_cards as card, index}