Table Row density (#2668)

* Less padded tables

* Better width on buttons in row

* Make mobile height taller

* Make table header cell less wide

Author: Alex-Tideman

playwright.config.ts

@@ -44,7 +44,7 @@ export default defineConfig({
       testIgnore: /.*desktop.spec.ts/,
       use: {
         ...devices['Desktop Chrome'],
-        viewport: { width: 320, height: 480 },
+        viewport: { width: 320, height: 800 },
         isMobile: true,
       },
     },

src/lib/components/workflow-status.svelte

@@ -79,7 +79,7 @@
 </script>
 
 <div
-  class="relative flex items-center gap-0 text-center text-sm leading-4"
+  class="relative flex items-center gap-0 text-center text-xs leading-4"
   data-testid={$$props['test-id']}
 >
   <span

src/lib/components/workflow/workflows-summary-configurable-table/table-body-cell.svelte

@@ -144,7 +144,7 @@
 
 <style lang="postcss">
   .workflows-summary-table-body-cell {
-    @apply h-10 whitespace-nowrap;
+    @apply h-8 whitespace-nowrap;
 
     &.filterable {
       @apply relative pr-24;

src/lib/components/workflow/workflows-summary-configurable-table/table-header-row.svelte

@@ -48,7 +48,7 @@
       />
     </th>
   {/if}
-  <th class="w-12"></th>
+  <th class="w-6"></th>
   {#if $supportsBulkActions && $batchActionsVisible}
     <th class="batch-actions-table-cell" colspan={columnsCount}>
       <BatchActions {workflows} />

src/lib/components/workflow/workflows-summary-configurable-table/table-row.svelte

@@ -56,7 +56,10 @@
       />
     </td>
     <td
-      class="cursor-point relative flex items-center justify-center gap-0.5 pt-2"
+      class="cursor-point relative flex items-center justify-center gap-0.5 py-0.5 {$hideChildWorkflows &&
+      !child
+        ? 'w-auto'
+        : 'w-6'}"
     >
       {#if !workflowCreateDisabled($page)}
         <StartWorkflowButton

src/lib/holocene/table/paginated-table/index.svelte

@@ -74,7 +74,7 @@
     }
 
     :global(tr > th) {
-      @apply whitespace-nowrap p-2 text-left font-medium;
+      @apply whitespace-nowrap px-2 text-left font-medium;
     }
   }
 
@@ -104,7 +104,7 @@
     }
 
     :global(tr > td) {
-      @apply whitespace-nowrap p-2;
+      @apply whitespace-nowrap px-2;
     }
 
     :global(tr > td > .table-link) {
@@ -114,7 +114,7 @@
 
   .primary .paginated-table-body {
     :global(tr:not(.empty)) {
-      @apply h-12 border-b border-table last-of-type:border-0 hover:bg-interactive-table-hover hover:bg-fixed;
+      @apply h-8 border-b border-table last-of-type:border-0 hover:bg-interactive-table-hover hover:bg-fixed;
     }
   }