From d3c18487c745a2265b32f7df80453e5be5935ebb Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Sun, 27 Oct 2024 13:31:01 +0700
Subject: [PATCH] chore: improve support for small mobile phones

---
 src/pages/wallet/New.tsx | 16 ++++++++--------
 tailwind.config.js       |  3 +++
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/pages/wallet/New.tsx b/src/pages/wallet/New.tsx
index 576bfe9..83f6bcb 100644
--- a/src/pages/wallet/New.tsx
+++ b/src/pages/wallet/New.tsx
@@ -183,23 +183,23 @@ export function New() {
               <p className="text-gray-400 text-sm">{label}</p>
               <PopiconsEditPencilDuotone className="h-4 w-4" />
             </button>
-            <div className="grid grid-cols-3 gap-4 w-full">
+            <div className="grid grid-cols-3 gap-2 sm:gap-4 w-full">
               {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
                 <button
                   key={num}
                   type="button" // Prevent form submission
-                  className="btn btn-primary w-full h-16 flex-grow text-2xl flex items-center justify-center"
+                  className="btn btn-primary w-full h-12 sm:h-16 flex-grow text-2xl flex items-center justify-center"
                   onClick={() => handleNumberClick(`${num}`)}
                 >
                   {num}
                 </button>
               ))}
 
-              <span className="w-full h-16 flex-grow text-2xl flex items-center justify-center"></span>
+              <span className="w-full h-12 sm:h-16 flex-grow text-2xl flex items-center justify-center"></span>
 
               <button
                 type="button" // Prevent form submission
-                className="btn btn-primary w-full h-16 flex-grow text-2xl flex items-center justify-center"
+                className="btn btn-primary w-full h-12 sm:h-16 flex-grow text-2xl flex items-center justify-center"
                 onClick={() => handleNumberClick(`0`)}
               >
                 0
@@ -207,7 +207,7 @@ export function New() {
 
               <button
                 type="button" // Prevent form submission
-                className="btn btn-primary w-full h-16 flex-grow text-2xl flex items-center justify-center"
+                className="btn btn-primary w-full h-12 sm:h-16 flex-grow text-2xl flex items-center justify-center"
                 onClick={() => handleNumberClick(`00`)}
                 disabled={currency === "SATS"}
               >
@@ -216,7 +216,7 @@ export function New() {
 
               <button
                 type="button" // Prevent form submission
-                className="btn btn-light w-full h-8 flex-grow text-l flex items-center justify-center text-gray-400"
+                className="btn btn-light w-full h-6 sm:h-8 flex-grow text-l flex items-center justify-center text-gray-400"
                 onClick={handleClear}
               >
                 Clear
@@ -224,7 +224,7 @@ export function New() {
 
               <button
                 type="button" // Prevent form submission
-                className="btn btn-light w-full h-8 flex-grow text-l flex items-center justify-center text-gray-400"
+                className="btn btn-light w-full h-6 sm:h-8 flex-grow text-l flex items-center justify-center text-gray-400"
                 onClick={handleDelete}
               >
                 Del
@@ -232,7 +232,7 @@ export function New() {
 
               <button
                 type="button" // Prevent form submission
-                className="btn btn-light w-full h-8 flex-grow text-2xl font-bold flex items-center justify-center"
+                className="btn btn-light w-full h-6 sm:h-8 flex-grow text-2xl font-bold flex items-center justify-center"
                 onClick={handlePlus} // Add to total
               >
                 +
diff --git a/tailwind.config.js b/tailwind.config.js
index d16bc19..3c6ee05 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,9 @@ export default {
         sans: ["Inter", "sans-serif"],
       },
     },
+    screens: {
+      sm: "400px", // decrease small breakpoint from 640px to support small phones (e.g. iPhone SE)
+    },
   },
   // eslint-disable-next-line no-undef
   plugins: [require("daisyui")],