fix(List): truncate secret value to avoid horizontal overflow

This commit is contained in:
cheskoxd 2025-08-20 20:09:49 -05:00
parent 8ed40ee71b
commit aa3361401f

View File

@ -29,11 +29,11 @@
} }
</script> </script>
<table class="table mb-8 w-full"> <table class="table mb-8 w-full table-auto">
<thead> <thead>
<tr> <tr>
<th class="w-2/5 border-b-2 border-neutral">Key</th> <th class="w-2/5 border-b-2 border-neutral text-left">Key</th>
<th class="w-2/5 border-b-2 border-neutral">Value</th> <th class="w-2/5 border-b-2 border-neutral text-left">Value</th>
<th class="w-1/5 border-b-2 border-neutral text-right">Actions</th> <th class="w-1/5 border-b-2 border-neutral text-right">Actions</th>
</tr> </tr>
</thead> </thead>
@ -41,17 +41,22 @@
<tbody> <tbody>
{#each $items as item} {#each $items as item}
<tr transition:fade> <tr transition:fade>
<th>{item.name}</th> <th class="truncate max-w-[150px]">{item.name}</th>
<td>{item.value.slice(0, 2) + item.value.slice(2).replaceAll(/./g, '*')}</td> <td class="truncate max-w-[150px]">
{item.value.slice(0, 2) + item.value.slice(2).replaceAll(/./g, '*')}
</td>
<td class="text-right"> <td class="text-right">
<button <button
aria-label="Delete" aria-label="Delete"
on:click={handleDelete(item.name)} on:click={handleDelete(item.name)}
type="button" type="button"
class="btn btn-sm btn-square btn-outline btn-warning"><Fa icon={faTrash} /></button class="btn btn-sm btn-square btn-outline btn-warning"
> >
<Fa icon={faTrash} />
</button>
</td> </td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>