From 403e15e9ad618bd2fc050fd54dd21a1f482c8514 Mon Sep 17 00:00:00 2001
From: "CodesBy.Mitch" <osiagomitchell@gmail.com>
Date: Sun, 31 May 2026 20:48:29 +0000
Subject: [PATCH] fix: mobile ux audit and stellar flow responsive fixes

---
 src/components/ChainSwitcher.tsx  |  2 +-
 src/components/CopyButton.tsx     |  2 +-
 src/components/Header.tsx         |  4 ++--
 src/components/StellarReceive.tsx | 14 +++++++-------
 src/components/WalletConnect.tsx  |  4 ++--
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ChainSwitcher.tsx b/src/components/ChainSwitcher.tsx
index cae86af..c8b3f35 100644
--- a/src/components/ChainSwitcher.tsx
+++ b/src/components/ChainSwitcher.tsx
@@ -16,7 +16,7 @@ export function ChainSwitcher() {
       <select
         value={chain}
         onChange={(e) => setChain(e.target.value as Chain)}
-        className="h-8 appearance-none border border-outline-variant bg-surface px-3 py-1.5 pr-7 font-mono text-[10px] uppercase tracking-widest text-primary focus:border-primary focus:outline-none sm:h-9 sm:px-4 sm:py-2 sm:pr-8 sm:text-xs"
+        className="h-11 appearance-none border border-outline-variant bg-surface px-3 py-1.5 pr-7 font-mono text-[10px] uppercase tracking-widest text-primary focus:border-primary focus:outline-none sm:h-9 sm:px-4 sm:py-2 sm:pr-8 sm:text-xs"
       >
         {chains.map((c) => (
           <option key={c.id} value={c.id}>
diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
index 0c784a9..f0e5c2d 100644
--- a/src/components/CopyButton.tsx
+++ b/src/components/CopyButton.tsx
@@ -9,7 +9,7 @@ export function CopyButton({ text }: { text: string }) {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
       }}
-      className="shrink-0 font-mono text-[10px] uppercase tracking-widest text-outline transition-colors hover:text-primary"
+      className="flex h-10 shrink-0 items-center px-2 font-mono text-[10px] uppercase tracking-widest text-outline transition-colors hover:text-primary active:bg-surface-bright"
     >
       {copied ? 'Copied' : 'Copy'}
     </button>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 4ea4696..0b775f9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -48,11 +48,11 @@ export function Header() {
           <WalletConnect />
           <button
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            className="flex h-8 w-8 items-center justify-center text-outline transition-colors hover:text-on-surface-variant sm:hidden"
+            className="flex h-11 w-11 items-center justify-center text-outline transition-colors hover:text-on-surface-variant sm:hidden"
             aria-label="Menu"
           >
             <svg
-              className="h-4 w-4"
+              className="h-5 w-5"
               viewBox="0 0 16 16"
               fill="none"
               stroke="currentColor"
diff --git a/src/components/StellarReceive.tsx b/src/components/StellarReceive.tsx
index d279a52..b08156b 100644
--- a/src/components/StellarReceive.tsx
+++ b/src/components/StellarReceive.tsx
@@ -269,22 +269,22 @@ function StellarStealthRow({
       </div>
 
       {!withdrawHash && balance && parseFloat(balance) > 0 && (
-        <div className="flex flex-col gap-1.5">
+        <div className="flex flex-col gap-2">
           <label className="font-mono text-[10px] uppercase tracking-widest text-outline">
             Withdraw to
           </label>
-          <div className="flex gap-2">
+          <div className="flex flex-col gap-2 sm:flex-row">
             <input
               type="text"
               value={dest}
               onChange={(e) => setDest(e.target.value)}
               placeholder="Destination address (G...)"
-              className="h-10 flex-1 border border-outline-variant bg-surface px-3 font-mono text-xs text-primary placeholder:text-outline focus:border-primary"
+              className="h-11 flex-1 border border-outline-variant bg-surface px-3 font-mono text-[11px] text-primary placeholder:text-outline focus:border-primary sm:h-10 sm:text-xs"
             />
             <button
               onClick={handleWithdraw}
               disabled={!dest || withdrawing}
-              className="h-10 bg-primary px-4 font-heading text-[10px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
+              className="h-11 bg-primary px-6 font-heading text-[11px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30 sm:h-10 sm:px-4 sm:text-[10px]"
             >
               {withdrawing ? '...' : 'Withdraw'}
             </button>
@@ -543,7 +543,7 @@ export function StellarReceive() {
           <button
             onClick={deriveKeysFromWallet}
             disabled={isDerivingKeys}
-            className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
+            className="h-12 w-full bg-primary font-heading text-[14px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30 sm:text-[13px]"
           >
             {isDerivingKeys ? 'Sign in wallet...' : 'Derive Keys'}
           </button>
@@ -605,11 +605,11 @@ export function StellarReceive() {
             )}
           </div>
 
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <button
               onClick={scanPayments}
               disabled={isScanning}
-              className="h-12 bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
+              className="h-12 bg-primary px-8 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
             >
               {isScanning ? 'Scanning...' : 'Scan for Payments'}
             </button>
diff --git a/src/components/WalletConnect.tsx b/src/components/WalletConnect.tsx
index 807db1c..f60577a 100644
--- a/src/components/WalletConnect.tsx
+++ b/src/components/WalletConnect.tsx
@@ -7,9 +7,9 @@ import { useChain } from '@/context/ChainContext';
 import { useStellarWallet } from '@/context/StellarWalletContext';
 
 const btnBase =
-  'bg-transparent border border-outline-variant px-3 py-1.5 font-heading text-[10px] uppercase tracking-widest text-primary transition-colors hover:bg-surface-bright disabled:opacity-50 sm:px-4 sm:py-2 sm:text-xs h-8 sm:h-9';
+  'bg-transparent border border-outline-variant px-3 py-1.5 font-heading text-[10px] uppercase tracking-widest text-primary transition-colors hover:bg-surface-bright disabled:opacity-50 sm:px-4 sm:py-2 sm:text-xs h-11 sm:h-9';
 const btnConnected =
-  'bg-transparent border border-outline-variant px-3 py-1.5 font-mono text-[10px] text-primary transition-colors hover:bg-surface-bright sm:px-4 sm:py-2 sm:text-xs h-8 sm:h-9';
+  'bg-transparent border border-outline-variant px-3 py-1.5 font-mono text-[10px] text-primary transition-colors hover:bg-surface-bright sm:px-4 sm:py-2 sm:text-xs h-11 sm:h-9';
 
 function HorizenButton() {
   return (