mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
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:
+15
-5
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user