From 9c13b2f9e938ad36cb74c66a8f91a5b872c8c2d1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Wed, 12 Apr 2023 20:27:12 +0200
Subject: [PATCH] fix(CardsOverview): table scroll + checkbox posititioning

---
 src/components/cards/CardsOverview.svelte | 116 ++++++++++------------
 1 file changed, 51 insertions(+), 65 deletions(-)

diff --git a/src/components/cards/CardsOverview.svelte b/src/components/cards/CardsOverview.svelte
index 0d9309ac..f3832ff2 100644
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -167,57 +167,57 @@
       <p class="font-bold">{$_("loading-cards")}</p>
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
+  {:else if current_cards.length === 0}
+    <CardsEmptyState />
   {:else}
-    {#if current_cards.length === 0}
-      <CardsEmptyState />
-    {:else}
-      <div class="h-12 mt-1">
-        {#if selected.length > 0}
-          <button
-            type="button"
-            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-            id="options-menu"
-            on:click={async () => {
-              const prom = [];
-              for (const card of selectedCards) {
-                prom.push(
-                  RunnerCardService.runnerCardControllerRemove(card.id, true)
-                );
-              }
-              await Promise.all(prom);
-              Toastify({
-                text: $_("cards-deleted"),
-                duration: 3500,
-                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-              }).showToast();
-              for (const card of generate_cards) {
-                current_cards = current_cards.filter((c) => c.id !== card.id);
-              }
-              options.update((options) => ({
-                ...options,
-                data: current_cards,
-              }));
-            }}
+    <div class="h-12 mt-1">
+      {#if selected.length > 0}
+        <button
+          type="button"
+          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+          id="options-menu"
+          on:click={async () => {
+            const prom = [];
+            for (const card of selectedCards) {
+              prom.push(
+                RunnerCardService.runnerCardControllerRemove(card.id, true)
+              );
+            }
+            await Promise.all(prom);
+            Toastify({
+              text: $_("cards-deleted"),
+              duration: 3500,
+              backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            }).showToast();
+            for (const card of generate_cards) {
+              current_cards = current_cards.filter((c) => c.id !== card.id);
+            }
+            options.update((options) => ({
+              ...options,
+              data: current_cards,
+            }));
+          }}
+        >
+          {$_("delete-cards")}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-5 h-5"
           >
-            {$_("delete-cards")}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-5 h-5"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-              />
-            </svg>
-          </button>
-        {/if}
-        <GenerateRunnerCards bind:cards_show bind:generate_cards />
-      </div>
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+            />
+          </svg>
+        </button>
+      {/if}
+      <GenerateRunnerCards bind:cards_show bind:generate_cards />
+    </div>
+    <div class="overflow-x-auto">
       <table class="w-full">
         <thead>
           {#each $table.getHeaderGroups() as headerGroup}
@@ -260,21 +260,7 @@
           {/each}
         </tbody>
       </table>
-      <TableBottom {table} {selected} />
-    {/if}
+    </div>
+    <TableBottom {table} {selected} />
   {/if}
 {/if}
-
-<style>
-  table tbody {
-    display: block;
-    overflow-y: scroll;
-  }
-
-  table thead,
-  table tbody tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-  }
-</style>