Add smart trunctation to all table cell types

packages/standard-components/src/table/AttachmentRenderer.svelte

@@ -1,15 +1,20 @@
 <script>
   export let value
+
+  const displayLimit = 5
+  $: attachments = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - attachments.length
 </script>
 
-{#if value && value.length}
-  {#each value as attachment}
+{#each attachments as attachment}
   {#if attachment.type.startsWith('image')}
     <img src={attachment.url} alt={attachment.extension} />
   {:else}
     <div class="file">{attachment.extension}</div>
   {/if}
-  {/each}
+{/each}
+{#if leftover}
+  <div>+{leftover} others</div>
 {/if}
 
 <style>

packages/standard-components/src/table/RelationshipRenderer.svelte

@@ -2,14 +2,19 @@
   import "@spectrum-css/label/dist/index-vars.css"
 
   export let value
+
+  const displayLimit = 5
+  $: relationships = value?.slice(0, displayLimit) ?? []
+  $: leftover = (value?.length ?? 0) - relationships.length
 </script>
 
-{#if value && value.length}
-  {#each value as item}
-    {#if item && item.primaryDisplay}
+{#each relationships as relationship}
+  {#if relationship?.primaryDisplay}
     <span class="spectrum-Label spectrum-Label--grey">
-        {item.primaryDisplay}
+      {relationship.primaryDisplay}
     </span>
   {/if}
-  {/each}
+{/each}
+{#if leftover}
+  <div>+{leftover} others</div>
 {/if}

packages/standard-components/src/table/StringRenderer.svelte

@@ -8,5 +8,6 @@
   div {
     overflow: hidden;
     text-overflow: ellipsis;
+    max-width: 320px;
   }
 </style>

packages/standard-components/src/table/Table.svelte

@@ -192,8 +192,6 @@
     justify-content: flex-start;
     align-items: center;
     gap: 4px;
-    max-width: 320px;
-    overflow: hidden;
   }
   .spectrum-Table-sortedIcon {
     opacity: 0;