From a7738f97a664fcd0416bafd7564797aa44cb70b0 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sun, 6 Oct 2024 16:58:50 +0530
Subject: [PATCH] fix: table content width as per content.

---
 .../collection-[collection]/table.svelte      | 44 ++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 8b8c7832d..bd42e246b 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/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';
@@ -43,8 +43,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 '[ ]';
 
@@ -217,15 +232,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}
@@ -320,7 +339,8 @@
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
         <Button secondary submit disabled={deleting || (relAttributes?.length && !checked)}
-            >Delete</Button>
+            >Delete
+        </Button>
     </svelte:fragment>
 </Modal>
 
@@ -335,4 +355,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>