Merge pull request #1394 from ItzNotABug/fix-table-content-truncated

Fix Table Content Truncated

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -23,7 +23,7 @@
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
+    import { afterUpdate, onMount } from 'svelte';
     import type { PageData } from './$types';
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
@@ -44,8 +44,23 @@
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
+        updateMaxWidth();
     });
 
+    afterUpdate(() => updateMaxWidth());
+
+    function updateMaxWidth() {
+        const tableCells = Array.from(document.querySelectorAll('.less-width-truncated'));
+
+        const visibleColumnsCount = $columns.filter((col) => col.show).length;
+        const newMaxWidth = Math.max(50 - (visibleColumnsCount - 1) * 5, 25);
+
+        tableCells.forEach((cell) => {
+            const cellItem = cell as HTMLElement;
+            cellItem.style.maxWidth = `${newMaxWidth}vw`;
+        });
+    }
+
     function formatArray(array: unknown[]) {
         if (array.length === 0) return '[ ]';
 
@@ -220,15 +235,19 @@
                             </TableCell>
                         {:else}
                             {@const formatted = formatColumn(document[column.id])}
-                            <TableCell>
+                            <TableCell class="truncated-content-table-cell">
                                 <div
-                                    class="u-width-fit-content"
+                                    class:truncated={formatted.whole.length >
+                                        formatted.value.length}
+                                    class:less-width-truncated={$columns.filter((col) => col.show)
+                                        .length > 1}
                                     use:tooltip={{
                                         content: formatted.whole,
                                         disabled: !formatted.truncated
                                     }}
-                                    data-private>
-                                    {formatted.value}
+                                    data-private
+                                    data-content={formatted.whole}>
+                                    {formatted.whole}
                                 </div>
                             </TableCell>
                         {/if}
@@ -345,4 +364,16 @@
             display: inline-block;
         }
     }
+
+    :global(.truncated-content-table-cell .truncated) {
+        max-width: 50vw;
+        overflow: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        text-overflow: ellipsis;
+    }
+
+    :global(.truncated-content-table-cell:has(.truncated)) {
+        inline-size: 0;
+    }
 </style>