src/components/cards/CardsOverview.svelte

@@ -58,7 +58,6 @@
   }
 // -----------------
   export let wrapperHeight = "500px";
-  export let wrapperWidth = "1000px";
   let scrollTop = 0;
   $: rendered = filtered_cards;
   let innerHeight = 0;
@@ -78,15 +77,16 @@
 </script>
 
 <style>
-  .virtual-wrapper {
-    overflow-y: scroll;
-    margin: 0 auto;
-  }
-  .inner-wrapper {
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-  }
+  table tbody {
+  display: block;
+  overflow-y: scroll;
+}
+
+table thead, table tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
 </style>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
@@ -163,14 +163,11 @@
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200">
-            <!-- //// -->
-            <div
-  class="virtual-wrapper"
+          <tbody class="divide-y divide-gray-200 virtual-wrapper"
   on:scroll={updateScroll}
-  style="height: {wrapperHeight}; width: {wrapperWidth}"
-  bind:this={ele}>
-  <div class="inner-wrapper" style="height: {innerHeight}">
+  style="height: {wrapperHeight}; width:100%"
+  bind:this={ele}
+          >
     {#each filtered_cards as card, index}
     {#if card.code
       .toLowerCase()
@@ -271,8 +268,6 @@
       </tr>
     {/if}
     {/each}
-  </div>
-</div>
           </tbody>
         </table>
       </div>