feat: fix table margins

src/lib/components/permissions/team.svelte

@@ -6,6 +6,8 @@
     import { AvatarInitials, EmptySearch, Modal, PaginationInline } from '..';
     import type { Writable } from 'svelte/store';
     import type { Permission } from './permissions.svelte';
+    import Table from '$lib/elements/table/table.svelte';
+    import { TableBody, TableCell, TableRow } from '$lib/elements/table';
 
     export let show: boolean;
     export let groups: Writable<Map<string, Permission>>;
@@ -77,13 +79,13 @@
         bind:value={search} />
     {#if results?.teams?.length}
         <div class="table-wrapper">
-            <table class="table is-table-layout-auto is-remove-outer-styles">
-                <tbody class="table-tbody">
+            <Table noStyles isAutoLayout tag="table">
+                <TableBody>
                     {#each results.teams as team (team.$id)}
                         {@const role = `team:${team.$id}`}
                         {@const exists = $groups.has(role)}
-                        <tr class="table-row">
-                            <td class="table-col" data-title="Enabled" style="--p-col-width:40">
+                        <TableRow>
+                            <TableCell title="Enabled" width={40}>
                                 <input
                                     id={team.$id}
                                     type="checkbox"
@@ -92,8 +94,8 @@
                                     checked={exists || selected.has(role)}
                                     disabled={exists}
                                     on:change={(event) => onSelection(event, role)} />
-                            </td>
-                            <td class="table-col" data-title="Team">
+                            </TableCell>
+                            <TableCell title="Team">
                                 <label class="u-flex u-cross-center u-gap-8" for={team.$id}>
                                     <AvatarInitials size={32} name={team.name} />
                                     <div class="u-line-height-1-5">
@@ -101,11 +103,11 @@
                                         <div class="u-x-small">{team.$id}</div>
                                     </div>
                                 </label>
-                            </td>
-                        </tr>
+                            </TableCell>
+                        </TableRow>
                     {/each}
-                </tbody>
-            </table>
+                </TableBody>
+            </Table>
         </div>
         <div class="u-flex u-margin-block-start-32 u-main-space-between">
             <p class="text">Total results: {results?.total}</p>

src/lib/elements/table/table.svelte

@@ -3,10 +3,14 @@
     export let noStyles = false;
     export let style = '';
     export let transparent = false;
+    export let isAutoLayout = false;
+    export let tag: 'div' | 'table' = 'div';
 </script>
 
-<div
+<svelte:element
+    this={tag}
     class="table is-selected-columns-mobile"
+    class:is-table-layout-auto={isAutoLayout}
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
     {style}
@@ -14,4 +18,4 @@
     role="table"
     data-private>
     <slot />
-</div>
+</svelte:element>

src/lib/elements/table/tableScroll.svelte

@@ -5,6 +5,8 @@
     export let noMargin = false;
     export let style = '';
     export let transparent = false;
+    export let noStyles = false;
+
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement, unknown> = (node) => {
@@ -44,6 +46,7 @@
     <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table
             class="table"
+            class:is-remove-outer-styles={noStyles}
             class:is-sticky-scroll={isSticky && isOverflowing}
             {style}
             style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}>

src/routes/console/organization-[organization]/billing/paymentHistory.svelte

@@ -65,7 +65,7 @@
     </p>
     <svelte:fragment slot="aside">
         {#if invoiceList.total - 1 > 0}
-            <TableScroll noMargin transparent>
+            <TableScroll noMargin transparent noStyles>
                 <TableHeader>
                     <TableCellHead width={100}>Due Date</TableCellHead>
                     <TableCellHead width={80}>Status</TableCellHead>
@@ -94,7 +94,7 @@
                                 <TableCellText title="due">
                                     {formatCurrency(invoice.amount)}
                                 </TableCellText>
-                                <TableCell showOverflow>
+                                <TableCell showOverflow right>
                                     <DropList
                                         bind:show={showDropdown[i]}
                                         placement="bottom-start"