Add default column widths and improve text display

- Set 168px width for all table columns
- Replace span with Typography.Text for better text truncation
- Add word-break styling to tooltip for long text wrapping
This commit is contained in:
Torsten Dittmann
2025-05-27 19:29:38 +02:00
parent 2a4de3bf52
commit 9bfefbd4d0
@@ -22,7 +22,8 @@
Button,
Link,
Badge,
FloatingActionBar
FloatingActionBar,
Typography
} from '@appwrite.io/pink-svelte';
import DualTimeView from '$lib/components/dualTimeView.svelte';
@@ -102,6 +103,7 @@
type: attribute.type as ColumnType,
show: selected?.includes(attribute.key) ?? true,
array: attribute?.array,
width: 168,
format:
'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
elements: 'elements' in attribute ? attribute.elements : null
@@ -166,7 +168,12 @@
let:root
allowSelection
bind:selectedRows
columns={[{ id: '$id', width: 200 }, ...$columns, { id: '$created' }, { id: '$updated' }]}>
columns={[
{ id: '$id', width: 200 },
...$columns,
{ id: '$created', width: 200 },
{ id: '$updated', width: 200 }
]}>
<svelte:fragment slot="header" let:root>
<Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
{#each $columns as column}
@@ -238,10 +245,13 @@
{:else}
{@const formatted = formatColumn(document[id])}
<Tooltip disabled={!formatted.truncated} placement="bottom">
<span>
<Typography.Text truncate>
{formatted.value}
</span>
<span style:white-space="pre-wrap" slot="tooltip">
</Typography.Text>
<span
style:white-space="pre-wrap"
style:word-break="break-all"
slot="tooltip">
{formatted.whole}
</span>
</Tooltip>