From 1c9a18a52c882067f02a9e3d476369292ea8dc3e Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Sat, 16 Dec 2023 13:48:41 +0100
Subject: [PATCH] Convert passphrase display to 3 cols with smaller text on
 mobile

---
 src/components/form/PassphraseDisplay.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form/PassphraseDisplay.tsx b/src/components/form/PassphraseDisplay.tsx
index b6ea0a0f..8eb4a2b9 100644
--- a/src/components/form/PassphraseDisplay.tsx
+++ b/src/components/form/PassphraseDisplay.tsx
@@ -38,10 +38,10 @@ export function PassphraseDisplay(props: { mnemonic: string }) {
           <span className="text-sm">{t("actions.copy")}</span>
         </button>
       </div>
-      <div className="px-4 py-4 grid grid-cols-4 gap-2">
+      <div className="px-4 py-4 grid grid-cols-3 text-sm sm:text-base sm:grid-cols-4 gap-2">
         {individualWords.map((word, i) => (
           <div
-            className="px-4 rounded-md py-2 bg-authentication-wordBackground text-white font-medium text-center"
+            className="rounded-md py-2 bg-authentication-wordBackground text-white font-medium text-center"
             // this doesn't get rerendered nor does it have state so its fine
             // eslint-disable-next-line react/no-array-index-key
             key={i}