diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index aaf132c0..7cfce66d 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -198,102 +198,104 @@
         bind:generate_runners={selectedRunners}
       />
     </div>
-    <table class="w-full">
-      <thead>
-        {#each $table.getHeaderGroups() as headerGroup}
-          <tr class="select-none">
-            <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-              <InputElement
-                type="checkbox"
-                checked={$table.getIsAllRowsSelected()}
-                indeterminate={$table.getIsSomeRowsSelected()}
-                on:change={() => $table.toggleAllRowsSelected()}
-              />
-            </th>
-            {#each headerGroup.headers as header}
-              <th class="cursor-pointer">
-                {#if !header.isPlaceholder}
-                  <button
-                    class="w-full"
-                    tabindex="0"
-                    on:click={header.column.getToggleSortingHandler()}
-                  >
-                    <svelte:component
-                      this={flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                    />
-                    {#if header.column
-                      .getIsSorted()
-                      .toString() == "asc" && header.column.getCanSort()}
-                      🔼
-                    {:else if header.column
-                      .getIsSorted()
-                      .toString() == "desc" && header.column.getCanSort()}
-                      🔽
-                    {/if}
-                  </button>
-                {/if}
-                {#if header.column.getCanFilter()}
-                  <div class="relative max-w-xs">
-                    <input
-                      title="name-search"
-                      value={header.column.getFilterValue() || ""}
-                      on:keyup={(e) => {
-                        header.column.setFilterValue(e.target.value);
-                      }}
-                      type="text"
-                      class="block w-full rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
-                      placeholder=""
-                    />
-                    <div
-                      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
-                    >
-                      <svg
-                        class="h-3.5 w-3.5 text-gray-400"
-                        xmlns="http://www.w3.org/2000/svg"
-                        width={16}
-                        height={16}
-                        fill="currentColor"
-                        viewBox="0 0 16 16"
-                      >
-                        <path
-                          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                {/if}
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          {#each $table.getHeaderGroups() as headerGroup}
+            <tr class="select-none">
+              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
+                <InputElement
+                  type="checkbox"
+                  checked={$table.getIsAllRowsSelected()}
+                  indeterminate={$table.getIsSomeRowsSelected()}
+                  on:change={() => $table.toggleAllRowsSelected()}
+                />
               </th>
-            {/each}
-          </tr>
-        {/each}
-      </thead>
-      <tbody>
-        {#each $table.getRowModel().rows as row}
-          <tr>
-            <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-              <InputElement
-                type="checkbox"
-                checked={row.getIsSelected()}
-                on:change={() => row.toggleSelected()}
-              />
-            </td>
-            {#each row.getVisibleCells() as cell}
-              <td>
-                <svelte:component
-                  this={flexRender(
-                    cell.column.columnDef.cell,
-                    cell.getContext()
-                  )}
+              {#each headerGroup.headers as header}
+                <th class="cursor-pointer">
+                  {#if !header.isPlaceholder}
+                    <button
+                      class="w-full"
+                      tabindex="0"
+                      on:click={header.column.getToggleSortingHandler()}
+                    >
+                      <svelte:component
+                        this={flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      />
+                      {#if header.column
+                        .getIsSorted()
+                        .toString() == "asc" && header.column.getCanSort()}
+                        🔼
+                      {:else if header.column
+                        .getIsSorted()
+                        .toString() == "desc" && header.column.getCanSort()}
+                        🔽
+                      {/if}
+                    </button>
+                  {/if}
+                  {#if header.column.getCanFilter()}
+                    <div class="relative max-w-xs">
+                      <input
+                        title="name-search"
+                        value={header.column.getFilterValue() || ""}
+                        on:keyup={(e) => {
+                          header.column.setFilterValue(e.target.value);
+                        }}
+                        type="text"
+                        class="block w-full rounded-md border-gray-200 py-2 pl-8 text-xs focus:border-blue-500 focus:ring-blue-500"
+                        placeholder=""
+                      />
+                      <div
+                        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2"
+                      >
+                        <svg
+                          class="h-3.5 w-3.5 text-gray-400"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width={16}
+                          height={16}
+                          fill="currentColor"
+                          viewBox="0 0 16 16"
+                        >
+                          <path
+                            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  {/if}
+                </th>
+              {/each}
+            </tr>
+          {/each}
+        </thead>
+        <tbody>
+          {#each $table.getRowModel().rows as row}
+            <tr>
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
+                <InputElement
+                  type="checkbox"
+                  checked={row.getIsSelected()}
+                  on:change={() => row.toggleSelected()}
                 />
               </td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
+              {#each row.getVisibleCells() as cell}
+                <td>
+                  <svelte:component
+                    this={flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )}
+                  />
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
     <div class="h-2" />
     <div class="flex items-center gap-2">
       <button