From c28d254b4d0081a1671796fe4e2117ac9ff5d320 Mon Sep 17 00:00:00 2001
From: Abdo <abdo@abdnh.net>
Date: Wed, 10 Jul 2024 09:54:11 +0300
Subject: [PATCH] Fix `<tr> is invalid inside <table>`

---
 ts/routes/card-info/CardStats.svelte | 14 +++++++-----
 ts/routes/graphs/CardCounts.svelte   | 34 +++++++++++++++-------------
 ts/routes/graphs/TableData.svelte    | 14 +++++++-----
 ts/routes/import-csv/Preview.svelte  | 24 ++++++++++++--------
 4 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/ts/routes/card-info/CardStats.svelte b/ts/routes/card-info/CardStats.svelte
index ddea49bde..2214d5481 100644
--- a/ts/routes/card-info/CardStats.svelte
+++ b/ts/routes/card-info/CardStats.svelte
@@ -141,12 +141,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <table class="stats-table align-start">
-    {#each statsRows as row}
-        <tr>
-            <th class="align-start">{row.label}</th>
-            <td>{row.value}</td>
-        </tr>
-    {/each}
+    <tbody>
+        {#each statsRows as row}
+            <tr>
+                <th class="align-start">{row.label}</th>
+                <td>{row.value}</td>
+            </tr>
+        {/each}
+    </tbody>
 </table>
 
 <style>
diff --git a/ts/routes/graphs/CardCounts.svelte b/ts/routes/graphs/CardCounts.svelte
index 5d8ad1639..d924aa0bb 100644
--- a/ts/routes/graphs/CardCounts.svelte
+++ b/ts/routes/graphs/CardCounts.svelte
@@ -58,10 +58,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </div>
         <div class="counts-table">
             <table>
-                {#each tableData as d, _idx}
-                    <tr>
-                        <!-- prettier-ignore -->
-                        <td>
+                <tbody>
+                    {#each tableData as d, _idx}
+                        <tr>
+                            <!-- prettier-ignore -->
+                            <td>
                             <span style="color: {d.colour};">■&nbsp;</span>
                             {#if $prefs.browserLinksSupported}
                                 <button class="search-link" on:click={() => dispatch('search', { query: d.query })}>{d.label}</button>
@@ -69,19 +70,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                 <span>{d.label}</span>
                             {/if}
                         </td>
-                        <td class="right">{d.count}</td>
-                        <td class="right">{d.percent}</td>
-                    </tr>
-                {/each}
+                            <td class="right">{d.count}</td>
+                            <td class="right">{d.percent}</td>
+                        </tr>
+                    {/each}
 
-                <tr>
-                    <td>
-                        <span style="visibility: hidden;">■</span>
-                        {total}
-                    </td>
-                    <td class="right">{graphData.totalCards}</td>
-                    <td />
-                </tr>
+                    <tr>
+                        <td>
+                            <span style="visibility: hidden;">■</span>
+                            {total}
+                        </td>
+                        <td class="right">{graphData.totalCards}</td>
+                        <td />
+                    </tr>
+                </tbody>
             </table>
         </div>
     </div>
diff --git a/ts/routes/graphs/TableData.svelte b/ts/routes/graphs/TableData.svelte
index 1a6bfa188..4e634418e 100644
--- a/ts/routes/graphs/TableData.svelte
+++ b/ts/routes/graphs/TableData.svelte
@@ -12,12 +12,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div>
     <table dir={direction()}>
-        {#each tableData as { label, value }}
-            <tr>
-                <td class="align-end">{label}:</td>
-                <td class="align-start">{value}</td>
-            </tr>
-        {/each}
+        <tbody>
+            {#each tableData as { label, value }}
+                <tr>
+                    <td class="align-end">{label}:</td>
+                    <td class="align-start">{value}</td>
+                </tr>
+            {/each}
+        </tbody>
     </table>
 </div>
 
diff --git a/ts/routes/import-csv/Preview.svelte b/ts/routes/import-csv/Preview.svelte
index d79223019..c5ae37879 100644
--- a/ts/routes/import-csv/Preview.svelte
+++ b/ts/routes/import-csv/Preview.svelte
@@ -13,18 +13,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <div class="outer">
     <table class="preview">
-        {#each $columnOptions.slice(1) as { label, shortLabel }}
-            <th>
-                {shortLabel || label}
-            </th>
-        {/each}
-        {#each $metadata.preview as row}
+        <thead>
             <tr>
-                {#each row.vals as cell}
-                    <td>{cell}</td>
+                {#each $columnOptions.slice(1) as { label, shortLabel }}
+                    <th>
+                        {shortLabel || label}
+                    </th>
                 {/each}
             </tr>
-        {/each}
+        </thead>
+        <tbody>
+            {#each $metadata.preview as row}
+                <tr>
+                    {#each row.vals as cell}
+                        <td>{cell}</td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
     </table>
 </div>