fix balance view (#384)

* fix balance view

* version bump and fix potentional error

Author: jeremy-babylonlabs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.19",
+  "version": "0.2.20",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/components/Header/Header.tsx

@@ -21,29 +21,31 @@ export const Header: React.FC<HeaderProps> = ({
   return (
     <nav>
       <div className="bg-base-300 shadow-sm">
-        <div className="container mx-auto flex w-full items-center justify-between gap-4 p-6 pb-4 md:pb-6">
-          <Logo />
-          <div className="flex flex-1">
-            <div className="hidden flex-1 xl:flex">
-              <TestingInfo />
+        <div className="container mx-auto flex-col">
+          <div className="w-full flex items-center justify-between gap-4 p-6 pb-4 md:pb-6">
+            <Logo />
+            <div className="flex flex-1">
+              <div className="hidden flex-1 xl:flex">
+                <TestingInfo />
+              </div>
             </div>
+            <ConnectSmall
+              onConnect={onConnect}
+              address={address}
+              btcWalletBalanceSat={btcWalletBalanceSat}
+              onDisconnect={onDisconnect}
+            />
+            <ThemeToggle />
+          </div>
+          <div
+            className={`container mx-auto flex w-full items-center gap-4 md:hidden md:p-0 ${address ? "justify-end p-6 pt-0" : ""}`}
+          >
+            <ConnectedSmall
+              address={address}
+              btcWalletBalanceSat={btcWalletBalanceSat}
+              onDisconnect={onDisconnect}
+            />
           </div>
-          <ConnectSmall
-            onConnect={onConnect}
-            address={address}
-            btcWalletBalanceSat={btcWalletBalanceSat}
-            onDisconnect={onDisconnect}
-          />
-          <ThemeToggle />
-        </div>
-        <div
-          className={`${address && "justify-end p-6 pt-0"}container mx-auto flex w-full items-center gap-4 md:hidden md:p-0`}
-        >
-          <ConnectedSmall
-            address={address}
-            btcWalletBalanceSat={btcWalletBalanceSat}
-            onDisconnect={onDisconnect}
-          />
         </div>
       </div>
       <div className="container mx-auto flex w-full items-center p-6 pb-0 xl:hidden">