From aaebbd317260615d0659dfd14560a9cda4b8d666 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 25 Sep 2024 16:42:47 -0700
Subject: prevent mnemonic wrapping

---
 src/components/Mnemonic.svelte | 8 ++++----
 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 === "-" ? "&mdash;" : 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 === "-" ? "&mdash;" : 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",
-- 
cgit v1.2.3