From 053ce82588ebd539db54e949e1ca8119048a619c Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Mon, 6 Jun 2022 14:42:58 +1000
Subject: [PATCH] Experimental changes to make table fit+scroll

- limit individual cells to 15em, and show ellipses when truncated
- limit total table width to body width, so that inner table is shown
with scrollbar
- use class rather than id - ids are bad practice in Svelte components,
as more than one may be displayed on a single page
---
 ts/import-csv/Preview.svelte | 42 ++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/ts/import-csv/Preview.svelte b/ts/import-csv/Preview.svelte
index a5ee43c3f..b8f937ae1 100644
--- a/ts/import-csv/Preview.svelte
+++ b/ts/import-csv/Preview.svelte
@@ -10,31 +10,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let preview: Generic.StringList[];
 </script>
 
-<table id="preview">
-    {#each columnOptions.slice(1) as { label }}
-        <th>
-            {label}
-        </th>
-    {/each}
-    {#each preview as row}
-        <tr>
-            {#each row.vals as cell}
-                <td>{cell}</td>
-            {/each}
-        </tr>
-    {/each}
-</table>
+<div class="outer">
+    <table class="preview">
+        {#each columnOptions.slice(1) as { label }}
+            <th>
+                {label}
+            </th>
+        {/each}
+        {#each preview as row}
+            <tr>
+                {#each row.vals as cell}
+                    <td>{cell}</td>
+                {/each}
+            </tr>
+        {/each}
+    </table>
+</div>
 
 <style lang="scss">
-    #preview {
+    .outer {
+        // approximate size based on body max width + margins
+        width: min(90vw, 65em);
+        overflow: auto;
+    }
+
+    .preview {
         border-collapse: collapse;
-        width: 100%;
         white-space: nowrap;
 
         th,
         td {
+            text-overflow: ellipsis;
+            overflow: hidden;
             border: 1px solid var(--faint-border);
             padding: 0.25rem 0.5rem;
+            max-width: 15em;
         }
 
         th {