fix: cellLink & trim comp, domains

src/lib/components/tab.svelte

@@ -22,7 +22,6 @@
 
             await goto(href);
             await waitUntil(() => {
-                console.log('tickUntil', el);
                 return el.classList.contains('is-selected');
             }, 1000);
             el.focus();

src/lib/components/trim.svelte

@@ -19,7 +19,8 @@
     {#if showTooltip}
         <span
             use:tooltip={{
-                content: container.innerText
+                content: container.innerText,
+                maxWidth: '30rem'
             }}>
             <slot />
         </span>

src/lib/elements/table/cellLink.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
     export let href: string;
     export let title: string;
+
+    export let external = false;
+    export let noStyle = false;
 </script>
 
 <div class="table-col" data-title={title} role="cell" data-private>
-    <a role="button" tabindex="0" class="link" {href}><slot /></a>
+    <a
+        role="button"
+        tabindex="0"
+        class:link={!noStyle}
+        {href}
+        target={external ? '_blank' : ''}
+        rel={external ? 'noopener noreferrer' : ''}><slot /></a>
 </div>

src/lib/pages/domains/index.svelte

@@ -6,12 +6,12 @@
 </script>
 
 <script lang="ts">
-    import { DropList, DropListItem, Empty, Heading, Modal } from '$lib/components';
+    import { DropList, DropListItem, Empty, Heading, Modal, Trim } from '$lib/components';
     import {
         TableBody,
         TableCell,
         TableCellHead,
-        TableCellText,
+        TableCellLink,
         TableHeader,
         TableRow,
         TableScroll
@@ -76,16 +76,19 @@
         <TableBody>
             {#each rules.rules as domain, i}
                 <TableRow>
-                    <TableCellText title="Domain">
-                        <a href={`//${domain.domain}`} target="_blank" rel="noopener noreferrer">
-                            {domain.domain}
-                            <span
-                                class="icon-external-link"
-                                aria-hidden="true"
-                                style="color: hsl(var(--color-neutral-50))" />
-                        </a>
-                    </TableCellText>
-                    <TableCellText title="Status">
+                    <TableCellLink
+                        title="Domain"
+                        href={`https://${domain.domain}`}
+                        external
+                        noStyle>
+                        <Trim>
+                            <span class="u-flex u-gap-4 u-cross-center">
+                                <span class="link"> {domain.domain}</span>
+                                <span class="icon-external-link" aria-hidden="true" />
+                            </span>
+                        </Trim>
+                    </TableCellLink>
+                    <TableCell title="Status">
                         {#if domain.status === 'created'}
                             <div class="u-flex u-gap-8 u-cross-center">
                                 <span
@@ -106,8 +109,8 @@
                                 <p class="u-stretch">Verified</p>
                             </div>
                         {/if}
-                    </TableCellText>
-                    <TableCellText title="Name">
+                    </TableCell>
+                    <TableCell title="Name">
                         {#if domain.status === 'unverified'}
                             <div class="u-flex u-gap-8 u-cross-center">
                                 <span
@@ -138,7 +141,7 @@
                                 <p class="u-stretch">Waiting to run</p>
                             </div>
                         {/if}
-                    </TableCellText>
+                    </TableCell>
                     <TableCell>
                         <DropList
                             bind:show={showDomainsDropdown[i]}