diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Mnemonic.svelte | 7 |
1 files changed, 5 insertions, 2 deletions
diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte index e00197fc..dd1772d0 100644 --- a/src/components/Mnemonic.svelte +++ b/src/components/Mnemonic.svelte @@ -1,12 +1,15 @@ <script lang="ts"> let { mnemonic } = $props(); + let words = $derived(mnemonic.split(" ")); </script> <div class="card w-full"> <div - class="card-body w-full text-secondary grid grid-flow-col grid-rows-6 sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center justify-items-center whitespace-nowrap text-xl" + class="card-body w-full text-secondary grid grid-flow-col {words.length > 12 + ? 'grid-rows-12' + : 'grid-rows-6'} sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center justify-items-center whitespace-nowrap text-xl" > - {#each mnemonic.split(" ") as w, i} + {#each words as w, i} <div class="flex items-center gap-2 w-full max-w-[10rem] justify-start"> <span class="select-none text-sm w-6 text-left">{i + 1}.</span> <span class="text-left"> |