chore: improve support for small mobile phones

getAlby · Oct 27, 2024 · d3c1848 · d3c1848
1 parent 7be86e4
commit d3c1848
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/pages/wallet/New.tsx b/src/pages/wallet/New.tsx
@@ -183,31 +183,31 @@ 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
               </button>
 
               <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,23 +216,23 @@ 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
               </button>
 
               <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
               </button>
 
               <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
@@ -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")],