diff options
| -rw-r--r-- | src/components/Mnemonic.svelte | 8 | ||||
| -rw-r--r-- | tailwind.config.cjs | 3 |
2 files changed, 7 insertions, 4 deletions
diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte index 5e834aed..ff5aea32 100644 --- a/src/components/Mnemonic.svelte +++ b/src/components/Mnemonic.svelte @@ -3,12 +3,12 @@ </script> <div - class="text-lg border p-4 rounded-2xl text-secondary grid grid-cols-3 gap-2 justify-center" + class="text-lg border p-4 rounded-2xl text-secondary grid xss:grid-flow-col xss:grid-rows-6 xss:grid-cols-2 grid-cols-3 gap-2 justify-items-center whitespace-nowrap w-full" > {#each mnemonic.split(" ") as w, i} - <div> - <span class="select-none text-sm text-black">{i + 1}.</span> - <span>{@html w === "-" ? "—" : w}</span> + <div class="flex gap-1"> + <div class="select-none text-xs text-black my-auto">{i + 1}</div> + <div class="my-auto">{@html w === "-" ? "—" : w}</div> </div> {/each} </div> diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 746f4ca6..38b5e98b 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -3,6 +3,9 @@ module.exports = { content: ["./src/**/*.{html,js,svelte}"], theme: { extend: { + screens: { + xss: { min: "161px", max: "380px" }, + }, colors: { primary: "#F5F7FA", secondary: "#70757E", |