From 25754d2224018a4dea92464f73b34df3fcbb1b6d Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Tue, 24 Feb 2026 23:48:17 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20improve=20DEX=20page=20mobile=20UI=20?=
 =?UTF-8?q?=E2=80=94=20smaller=20back=20button,=20taller=20chart,=20compac?=
 =?UTF-8?q?t=20swap=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Back to Home button: smaller padding/font on mobile, pinned to corner
- PriceChart: increase height to 280px, stack header vertically on mobile
- TokenSwap: reduce padding/gaps/fonts on mobile, fix double-colon in balance text
---
 web/src/components/AppLayout.tsx          |  4 ++--
 web/src/components/TokenSwap.tsx          | 24 +++++++++++------------
 web/src/components/trading/PriceChart.tsx |  6 +++---
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/src/components/AppLayout.tsx b/web/src/components/AppLayout.tsx
index 6962c206..ea464171 100644
--- a/web/src/components/AppLayout.tsx
+++ b/web/src/components/AppLayout.tsx
@@ -554,7 +554,7 @@ const AppLayout: React.FC = () => {
         
 
         {(showDEX || showProposalWizard || showDelegation || showForum || showModeration || showTreasury || showStaking || showMultiSig || showEducation || showP2P) && (
-          <div className="fixed bottom-8 right-8 z-50">
+          <div className="fixed bottom-4 right-4 sm:bottom-8 sm:right-8 z-50">
             <button
               onClick={() => {
                 setShowDEX(false);
@@ -568,7 +568,7 @@ const AppLayout: React.FC = () => {
                 setShowEducation(false);
                 setShowP2P(false);
               }}
-              className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2 transition-all"
+              className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 sm:px-6 sm:py-3 text-sm sm:text-base rounded-full shadow-lg flex items-center gap-2 transition-all"
             >
               {`← ${t('common.backToHome')}`}
             </button>
diff --git a/web/src/components/TokenSwap.tsx b/web/src/components/TokenSwap.tsx
index 18a62066..6d5d5d8b 100644
--- a/web/src/components/TokenSwap.tsx
+++ b/web/src/components/TokenSwap.tsx
@@ -867,7 +867,7 @@ const TokenSwap = () => {
   }
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
       {/* Kurdistan Sun Animation Overlay during swap (only after confirm dialog is closed) */}
       {isSwapping && !showConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
@@ -890,9 +890,9 @@ const TokenSwap = () => {
           />
         )}
 
-        <Card className="p-6">
-          <div className="flex justify-between items-center mb-6">
-            <h2 className="text-2xl font-bold">{t('tokenSwap.tokenSwap')}</h2>
+        <Card className="p-3 sm:p-6">
+          <div className="flex justify-between items-center mb-3 sm:mb-6">
+            <h2 className="text-lg sm:text-2xl font-bold">{t('tokenSwap.tokenSwap')}</h2>
             <Button variant="ghost" size="icon" onClick={() => setShowSettings(true)}>
               <Settings className="h-5 w-5" />
             </Button>
@@ -908,11 +908,11 @@ const TokenSwap = () => {
           )}
 
           <div className="space-y-4">
-            <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
+            <div className="bg-gray-800 border border-gray-700 rounded-lg p-3 sm:p-4">
               <div className="flex justify-between mb-2">
                 <span className="text-sm text-gray-400">{t('tokenSwap.from')}</span>
                 <span className="text-sm text-gray-400">
-                  {t('common.balance')}: {fromBalance} {getTokenDisplayName(fromToken)}
+                  {t('common.balance')} {fromBalance} {getTokenDisplayName(fromToken)}
                 </span>
               </div>
               <div className="flex gap-3">
@@ -921,7 +921,7 @@ const TokenSwap = () => {
                   value={fromAmount}
                   onChange={(e) => setFromAmount(e.target.value)}
                   placeholder="Amount"
-                  className="text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50"
+                  className="text-lg sm:text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50"
                   disabled={!selectedAccount}
                 />
                 <Select
@@ -936,7 +936,7 @@ const TokenSwap = () => {
                   }}
                   disabled={!selectedAccount}
                 >
-                  <SelectTrigger className="min-w-[140px] border-gray-600 hover:border-gray-500">
+                  <SelectTrigger className="min-w-[100px] sm:min-w-[140px] border-gray-600 hover:border-gray-500">
                     <SelectValue>
                       {(() => {
                         const token = AVAILABLE_TOKENS.find(t => t.symbol === fromToken);
@@ -979,11 +979,11 @@ const TokenSwap = () => {
               </Button>
             </div>
 
-            <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
+            <div className="bg-gray-800 border border-gray-700 rounded-lg p-3 sm:p-4">
               <div className="flex justify-between mb-2">
                 <span className="text-sm text-gray-400">{t('tokenSwap.to')}</span>
                 <span className="text-sm text-gray-400">
-                  {t('common.balance')}: {toBalance} {getTokenDisplayName(toToken)}
+                  {t('common.balance')} {toBalance} {getTokenDisplayName(toToken)}
                 </span>
               </div>
               <div className="flex gap-3">
@@ -992,7 +992,7 @@ const TokenSwap = () => {
                   value={toAmount}
                   readOnly
                   placeholder="Amount"
-                  className="text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50"
+                  className="text-lg sm:text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50"
                 />
                 <Select
                   value={toToken}
@@ -1006,7 +1006,7 @@ const TokenSwap = () => {
                   }}
                   disabled={!selectedAccount}
                 >
-                  <SelectTrigger className="min-w-[140px] border-gray-600 hover:border-gray-500">
+                  <SelectTrigger className="min-w-[100px] sm:min-w-[140px] border-gray-600 hover:border-gray-500">
                     <SelectValue>
                       {(() => {
                         const token = AVAILABLE_TOKENS.find(t => t.symbol === toToken);
diff --git a/web/src/components/trading/PriceChart.tsx b/web/src/components/trading/PriceChart.tsx
index a27f535f..82cb5b05 100644
--- a/web/src/components/trading/PriceChart.tsx
+++ b/web/src/components/trading/PriceChart.tsx
@@ -89,13 +89,13 @@ export const PriceChart: React.FC<PriceChartProps> = ({ fromToken, toToken, curr
 
   return (
     <Card className="p-4 bg-gray-900 border-gray-800">
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-4">
         <div>
           <div className="text-sm text-gray-400 mb-1">
             {t('priceChart.label', { from: getDisplayName(fromToken), to: getDisplayName(toToken) })}
           </div>
           <div className="flex items-center gap-3">
-            <span className="text-2xl font-bold text-white">
+            <span className="text-xl sm:text-2xl font-bold text-white">
               ${currentPrice.toFixed(4)}
             </span>
             <div className={`flex items-center gap-1 text-sm font-semibold ${
@@ -117,7 +117,7 @@ export const PriceChart: React.FC<PriceChartProps> = ({ fromToken, toToken, curr
         </Tabs>
       </div>
 
-      <ResponsiveContainer width="100%" height={200}>
+      <ResponsiveContainer width="100%" height={280}>
         <AreaChart data={chartData}>
           <defs>
             <linearGradient id={`gradient-${isPositive ? 'green' : 'red'}`} x1="0" y1="0" x2="0" y2="1">