From c5e2564523af652e7993b96e75f96d9bb4e9040f Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Mon, 13 Nov 2023 03:19:33 +0300
Subject: [PATCH] Fix jittery virtual table scrolling on mobile (#2810)

* Fix jittery virtual table scrolling on mobile

* Fix table body appearing above header on iOS (dae)
---
 ts/components/VirtualTable.svelte | 51 +++++++++++++++++++------------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/ts/components/VirtualTable.svelte b/ts/components/VirtualTable.svelte
index 70d7bce45..8e91b0472 100644
--- a/ts/components/VirtualTable.svelte
+++ b/ts/components/VirtualTable.svelte
@@ -21,7 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                   itemHeight,
           ) * itemHeight
         : 0;
-    $: innerHeight = Math.max(containerHeight, itemsCount * itemHeight);
     $: sliceLength = Math.ceil(containerHeight / itemHeight);
     $: startIndex = Math.floor(scrollTop / itemHeight);
     $: endIndex = Math.min(startIndex + sliceLength, itemsCount);
@@ -38,18 +37,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:this={container}
     on:scroll={() => (scrollTop = container.scrollTop)}
 >
-    <div class="inner" style="height: {innerHeight}px;">
-        <table
-            class="table {className}"
-            tabindex="-1"
-            style="margin-top: {scrollTop}px"
-        >
+    <table class="table {className}" tabindex="-1">
+        <thead>
             <slot name="headers" />
+        </thead>
+        <tbody>
+            {#if itemHeight * startIndex > 0}
+                <tr><td style="height: {itemHeight * startIndex}px;" /></tr>
+            {/if}
+
             {#each slice as index (index)}
                 <slot name="row" {index} />
             {/each}
-        </table>
-    </div>
+
+            {#if itemHeight * itemsCount - itemHeight * endIndex > 0}
+                <tr>
+                    <td
+                        style="height: {itemHeight * itemsCount -
+                            itemHeight * endIndex}px;"
+                    />
+                </tr>
+            {/if}
+        </tbody>
+    </table>
 </div>
 
 <style lang="scss">
@@ -61,17 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         margin: 0 auto;
     }
 
-    .inner {
-        position: relative;
-        overflow-y: visible;
-
-        width: 100%;
-    }
-
     .table {
-        // Prevent infinite scrolling
-        position: absolute;
-
         border-collapse: collapse;
         white-space: nowrap;
 
@@ -88,5 +88,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             background: var(--border);
             text-align: center;
         }
+
+        :global(thead) {
+            position: sticky;
+            top: -1px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            z-index: 1;
+        }
+
+        :global(tbody) {
+            overflow-y: scroll;
+            overflow-x: hidden;
+        }
     }
 </style>