Table component padding updates (#2482)

* Update padding on Table component to be consistent with PaginatedTable * Update padding in event table * Fix headers in Namespace detail tables
temporalio · Dec 19, 2024 · ee41527 · ee41527
1 parent fdec09e
commit ee41527
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 19 deletions.
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
@@ -18,7 +18,7 @@
 </script>
 
 {#if showEventGroup}
-  <div class="w-full p-2">
+  <div class="w-full">
     <div
       class="flex flex-col gap-0 overflow-hidden border border-subtle xl:flex-row"
     >
@@ -75,7 +75,7 @@
 {:else if event}
   {@const attributes = formatAttributes(event)}
   {@const details = Object.entries(attributes)}
-  <div class="w-full p-2">
+  <div class="w-full">
     <div class="w-full overflow-hidden border border-subtle">
       <EventLinksExpanded links={event?.links} />
       {#each details as [key, value] (key)}

diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
@@ -235,7 +235,7 @@
 
 <style lang="postcss">
   .row {
-    @apply flex select-none items-center gap-4 px-1 text-sm no-underline;
+    @apply flex select-none items-center gap-4 px-2 text-sm no-underline;
   }
 
   .failure {

diff --git a/src/lib/holocene/table/paginated-table/index.svelte b/src/lib/holocene/table/paginated-table/index.svelte
@@ -73,13 +73,13 @@
     }
 
     :global(tr > th) {
-      @apply whitespace-nowrap px-2 text-left font-medium;
+      @apply whitespace-nowrap p-2 text-left font-medium;
     }
   }
 
   .paginated-table-body {
     :global(tr.primary) {
-      @apply h-12 border-b border-table last-of-type:border-0 hover:bg-interactive-table-hover hover:bg-fixed;
+      @apply border-b border-table last-of-type:border-0 hover:bg-interactive-table-hover hover:bg-fixed;
     }
 
     :global(tr.dense) {
@@ -103,7 +103,7 @@
     }
 
     :global(tr > td) {
-      @apply whitespace-nowrap px-2;
+      @apply whitespace-nowrap p-2;
     }
 
     :global(tr > td > .table-link) {

diff --git a/src/lib/holocene/table/table.svelte b/src/lib/holocene/table/table.svelte
@@ -51,11 +51,11 @@
       @apply surface-table;
 
       :global(th) {
-        @apply border-t border-table px-1 py-2 text-off-white;
+        @apply border-t border-table p-2 text-off-white;
       }
 
       :global(td) {
-        @apply border-t border-table px-1 py-2;
+        @apply border-t border-table p-2;
 
         &:first-child {
           @apply border-l border-table;
@@ -69,7 +69,7 @@
 
     tbody :global {
       td {
-        @apply border-t border-table px-1 py-2 text-sm;
+        @apply border-t border-table p-2 text-sm;
 
         &:first-child:is(.expanded-cell) {
           @apply px-0;
@@ -81,11 +81,11 @@
   table.simple {
     thead :global(td),
     thead :global(th) {
-      @apply border-b border-primary py-2;
+      @apply border-b border-primary p-2;
     }
 
     tbody :global(td) {
-      @apply border-b  py-2;
+      @apply border-b p-2;
     }
 
     &:last-child {

diff --git a/src/routes/(app)/namespaces/[namespace]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/+page.svelte
@@ -68,15 +68,16 @@
 </h2>
 <Card class="flex flex-col gap-4 lg:flex-row">
   <article class="namespace-info flex w-full flex-col">
-    <h3>{translate('common.details')}</h3>
     <Table variant="simple">
       <caption class="sr-only" slot="caption"
         >{`${translate('namespaces.namespace')} ${translate(
           'common.details',
         )}`}</caption
       >
       <tr slot="headers">
-        <th class="w-1/2 lg:w-3/5" /><th />
+        <th colspan="2">
+          <h3>{translate('common.details')}</h3>
+        </th>
       </tr>
       <tr data-testid="namespace-owner">
         <td>{translate('namespaces.owner')}</td>
@@ -144,13 +145,14 @@
   </article>
 
   <article class="namespace-info flex w-full flex-col">
-    <h3>{translate('namespaces.versions')}</h3>
     <Table variant="simple">
       <caption class="sr-only" slot="caption"
         >{translate('namespaces.versions')}</caption
       >
       <tr slot="headers">
-        <th class="w-1/2 lg:w-3/4" /><th />
+        <th colspan="2">
+          <h3>{translate('namespaces.versions')}</h3>
+        </th>
       </tr>
 
       <tr data-testid="server-version">
@@ -165,16 +167,17 @@
   </article>
 
   <article class="namespace-info flex w-full flex-col">
-    <h3>
-      {translate('namespaces.client-actions')}
-    </h3>
     <Table variant="simple">
       <caption class="sr-only" slot="caption"
         >{translate('namespaces.client-actions')}</caption
       >
 
       <tr slot="headers">
-        <th class="w-1/2 lg:w-3/5" /><th />
+        <th colspan="2">
+          <h3>
+            {translate('namespaces.client-actions')}
+          </h3>
+        </th>
       </tr>
 
       <tr>