From 0c967564d8578ce87aea1db3864b3dc80a008f20 Mon Sep 17 00:00:00 2001
From: Nabarun <nabarun@deepstacksoft.com>
Date: Mon, 27 Jan 2025 19:08:18 +0530
Subject: [PATCH] Handle responsiveness in mobile browser

---
 index.html                      |  8 +++++
 next-env.d.ts                   |  1 +
 src/components/WalletHeader.tsx |  8 ++---
 styles.css                      | 57 +++++++++++++++++++++++++++++++++
 tsconfig.json                   |  3 +-
 5 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 index.html
 create mode 100644 styles.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..eb81b2f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+</body>
+</html>
diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03..fd36f94 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/components/WalletHeader.tsx b/src/components/WalletHeader.tsx
index 25d4f76..944d8ae 100644
--- a/src/components/WalletHeader.tsx
+++ b/src/components/WalletHeader.tsx
@@ -27,14 +27,14 @@ const WalletHeader: React.FC<WalletHeaderProps> = ({ walletState, onConnect, onD
           ))}
         </div>
       ) : (
-        <div className="flex items-center justify-between">
-          <span className="text-slate-300">Connected Wallet</span>
-          <span className="px-3 py-1 bg-amber-500/20 rounded-full text-amber-200 text-sm">
+        <div className="flex flex-col sm:flex-row items-center justify-between">
+          <span className="text-slate-300 mb-2 sm:mb-0">Connected Wallet</span>
+          <span className="px-3 py-1 bg-amber-500/20 rounded-full text-amber-200 text-sm mb-2 sm:mb-0">
             {walletState.publicKey?.slice(0, 22)}...
           </span>
           <button
             onClick={onDisconnect}
-            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-red-500/25 ml-4"
+            className="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-red-500/25"
           >
             Disconnect
           </button>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..8b610b0
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,57 @@
+/* ...existing code... */
+
+/* Mobile styles */
+@media (max-width: 600px) {
+    body {
+        font-size: 14px;
+    }
+    .container {
+        padding: 10px;
+    }
+    .header, .footer {
+        text-align: center;
+    }
+    .content {
+        margin: 0;
+        padding: 10px;
+    }
+    /* Add more styles as needed for mobile responsiveness */
+}
+
+/* Tablet styles */
+@media (min-width: 601px) and (max-width: 1024px) {
+    body {
+        font-size: 16px;
+    }
+    .container {
+        padding: 20px;
+    }
+    .header, .footer {
+        text-align: center;
+    }
+    .content {
+        margin: 0 auto;
+        padding: 20px;
+    }
+    /* Add more styles as needed for tablet responsiveness */
+}
+
+/* Desktop styles */
+@media (min-width: 1025px) {
+    body {
+        font-size: 18px;
+    }
+    .container {
+        padding: 30px;
+    }
+    .header, .footer {
+        text-align: left;
+    }
+    .content {
+        margin: 0 auto;
+        padding: 30px;
+    }
+    /* Add more styles as needed for desktop responsiveness */
+}
+
+/* ...existing code... */
diff --git a/tsconfig.json b/tsconfig.json
index e904f96..4d17c36 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,7 +22,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
-- 
2.45.2

