From 82ce1281b0a8f7a014d8835df237f7ccd34d00e1 Mon Sep 17 00:00:00 2001
From: waterWang <672684719@qq.com>
Date: Fri, 21 Aug 2026 05:03:46 +0800
Subject: [PATCH] fix: optimize mobile responsive layout for all pages (Closes
 #482)

---
 frontend/src/pages/CrossAssetPayment.tsx   | 18 +++++++++---------
 frontend/src/pages/CustomReportBuilder.tsx |  6 +++---
 frontend/src/pages/Debugger.tsx            |  8 ++++----
 frontend/src/pages/EmployeeEntry.tsx       | 10 +++++-----
 frontend/src/pages/Home.tsx                |  6 +++---
 frontend/src/pages/Settings.tsx            | 10 +++++-----
 frontend/src/pages/VestingEscrow.tsx       |  8 ++++----
 frontend/src/pages/WebhookSettings.tsx     | 14 +++++++-------
 8 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/frontend/src/pages/CrossAssetPayment.tsx b/frontend/src/pages/CrossAssetPayment.tsx
index 67a47233..c8f8ac25 100644
--- a/frontend/src/pages/CrossAssetPayment.tsx
+++ b/frontend/src/pages/CrossAssetPayment.tsx
@@ -173,14 +173,14 @@ export default function CrossAssetPayment() {
   };
 
   return (
-    <div className="min-h-screen bg-[#0a0a0c] text-white p-8 font-sans">
+    <div className="min-h-screen bg-[#0a0a0c] text-white p-4 sm:p-6 lg:p-8 font-sans">
       <div className="max-w-4xl mx-auto">
-        <header className="mb-12 flex items-end justify-between gap-4">
+        <header className="mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
           <div>
-            <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
+            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
               Cross-Asset Payment Settlement
             </h1>
-            <p className="text-zinc-400 mt-2">
+            <p className="text-zinc-400 mt-2 text-sm sm:text-base">
               Live pathfinding, Soroban simulation, and wallet-signed contract submission.
             </p>
           </div>
@@ -201,8 +201,8 @@ export default function CrossAssetPayment() {
           )}
         </header>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div className="bg-[#16161a] border border-zinc-800 rounded-2xl p-8 shadow-2xl backdrop-blur-xl">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+          <div className="bg-[#16161a] border border-zinc-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-2xl backdrop-blur-xl">
             <div className="space-y-6">
               <div className="flex items-center gap-4">
                 <div className="flex-1">
@@ -291,10 +291,10 @@ export default function CrossAssetPayment() {
             </div>
           </div>
 
-          <div className="space-y-8">
+          <div className="space-y-4 sm:space-y-6 lg:space-y-8">
             {/* Quote Panel */}
             {(isLoadingPaths || paths.length > 0) && (
-              <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-2xl p-8 shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
                 <h3 className="text-lg font-bold flex items-center gap-2 mb-6">
                   <ShieldCheck className="text-emerald-400" />
                   Available Conversion Paths
@@ -356,7 +356,7 @@ export default function CrossAssetPayment() {
             )}
 
             {status !== 'idle' && (
-              <div className="bg-[#16161a] border border-blue-900/30 rounded-2xl p-8 shadow-xl relative overflow-hidden">
+              <div className="bg-[#16161a] border border-blue-900/30 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl relative overflow-hidden">
                 <div className="absolute top-0 right-0 p-4">
                   <div
                     className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest ${status === 'completed' || status === 'confirmed' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-blue-500/20 text-blue-400'}`}
diff --git a/frontend/src/pages/CustomReportBuilder.tsx b/frontend/src/pages/CustomReportBuilder.tsx
index ef96a24f..1d629f97 100644
--- a/frontend/src/pages/CustomReportBuilder.tsx
+++ b/frontend/src/pages/CustomReportBuilder.tsx
@@ -91,15 +91,15 @@ const CustomReportBuilder = () => {
   };
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-8">
+    <div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-6 sm:space-y-8">
       <div>
-        <h1 className="text-3xl font-bold text-gray-900 mb-2">Custom Report Builder</h1>
+        <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Custom Report Builder</h1>
         <p className="text-gray-600">
           Select columns and date ranges to preview and export custom payroll data.
         </p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
         {/* Controls Sidebar */}
         <div className="md:col-span-1 space-y-6 flex flex-col">
           <Card>
diff --git a/frontend/src/pages/Debugger.tsx b/frontend/src/pages/Debugger.tsx
index 9f412241..f74f38b9 100644
--- a/frontend/src/pages/Debugger.tsx
+++ b/frontend/src/pages/Debugger.tsx
@@ -6,14 +6,14 @@ export default function Debugger() {
   const { t } = useTranslation();
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
-      <div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
+    <div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-6xl mx-auto w-full">
+      <div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
         <div>
-          <h1 className="text-4xl font-black mb-2 tracking-tight">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">
             {t('debugger.title', { highlight: '' }).replace('{{highlight}}', '')}
             <span className="text-accent2"> {t('debugger.titleHighlight')}</span>
           </h1>
-          <p className="text-muted font-mono text-sm tracking-wider uppercase">
+          <p className="text-muted font-mono text-xs sm:text-sm tracking-wider uppercase">
             {t('debugger.subtitle')}
           </p>
         </div>
diff --git a/frontend/src/pages/EmployeeEntry.tsx b/frontend/src/pages/EmployeeEntry.tsx
index 0384e061..6e9d464d 100644
--- a/frontend/src/pages/EmployeeEntry.tsx
+++ b/frontend/src/pages/EmployeeEntry.tsx
@@ -322,21 +322,21 @@ export default function EmployeeEntry() {
   }
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
-      <div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
+    <div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-6xl mx-auto w-full">
+      <div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
         <div>
-          <h1 className="text-4xl font-black mb-2 tracking-tight">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">
             {t('employees.title', { highlight: '' }).replace('{{highlight}}', '')}
             <span className="text-accent"> {t('employees.titleHighlight')}</span>
           </h1>
-          <p className="text-muted font-mono text-sm tracking-wider uppercase">
+          <p className="text-muted font-mono text-xs sm:text-sm tracking-wider uppercase">
             {t('employees.subtitle')}
           </p>
         </div>
         <button
           id="tour-add-employee"
           onClick={() => setIsAdding(true)}
-          className="px-5 py-2.5 bg-accent text-bg font-bold rounded-lg hover:bg-accent/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-accent/10"
+          className="px-5 py-2.5 bg-accent text-bg font-bold rounded-lg hover:bg-accent/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-accent/10 self-start sm:self-auto"
         >
           <Icon.Plus size="sm" />
           {t('employees.addEmployee')}
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 85e30180..423ec5d5 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -13,7 +13,7 @@ export default function Home() {
         <div className="absolute inset-0 bg-accent opacity-5 blur-2xl rounded-full" />
       </div>
 
-      <h1 className="text-6xl font-black mb-6 tracking-tighter leading-none">
+      <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black mb-6 tracking-tighter leading-none">
         {t('home.titleLine1Prefix')}{' '}
         <span className="text-accent">{t('home.titleLine1Highlight')}</span>
         <br />
@@ -22,7 +22,7 @@ export default function Home() {
         {t('home.titleLine2Suffix')}
       </h1>
 
-      <p className="text-xl text-muted max-w-2xl mb-12 leading-relaxed font-medium">
+      <p className="text-base sm:text-xl text-muted max-w-2xl mb-10 sm:mb-12 leading-relaxed font-medium">
         {t('home.tagline')}
       </p>
 
@@ -45,7 +45,7 @@ export default function Home() {
         </button>
       </div>
 
-      <div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-6xl w-full">
+      <div className="mt-16 sm:mt-24 grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 text-left max-w-6xl w-full">
         <div className="card glass noise">
           <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-6 border border-accent/20">
             <Icon.CreditCard01 size="lg" className="text-accent" />
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 022b40ca..3a48bbaf 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -10,14 +10,14 @@ export default function Settings() {
   };
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-3xl mx-auto w-full">
-      <div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
+    <div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-3xl mx-auto w-full">
+      <div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
         <div>
-          <h1 className="text-4xl font-black mb-2 tracking-tight">{t('settings.title')}</h1>
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">{t('settings.title')}</h1>
         </div>
       </div>
 
-      <div className="w-full card glass noise p-8">
+      <div className="w-full card glass noise p-4 sm:p-6 lg:p-8">
         <div className="flex flex-col gap-3">
           <label className="block text-xs font-bold uppercase tracking-widest text-muted">
             {t('settings.languageLabel')}
@@ -36,7 +36,7 @@ export default function Settings() {
 
       <Link
         to="/settings/webhooks"
-        className="w-full card glass noise p-8 mt-8 flex items-center justify-between gap-4 hover:border-hi transition-all"
+        className="w-full card glass noise p-4 sm:p-6 lg:p-8 mt-6 sm:mt-8 flex items-center justify-between gap-4 hover:border-hi transition-all"
       >
         <div className="flex items-center gap-4">
           <div className="w-10 h-10 rounded-xl grid place-items-center bg-accent/10 text-accent">
diff --git a/frontend/src/pages/VestingEscrow.tsx b/frontend/src/pages/VestingEscrow.tsx
index d45f6338..d5cee3fe 100644
--- a/frontend/src/pages/VestingEscrow.tsx
+++ b/frontend/src/pages/VestingEscrow.tsx
@@ -85,8 +85,8 @@ export default function VestingEscrow() {
   };
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
-      <div className="w-full mb-12 border-b border-hi pb-8">
+    <div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-6xl mx-auto w-full">
+      <div className="w-full mb-6 sm:mb-8 lg:mb-12 border-b border-hi pb-4 sm:pb-6 lg:pb-8">
         <Heading as="h1" size="lg" weight="bold" addlClassName="mb-2 tracking-tight">
           Vesting <span className="text-accent">Escrow</span>
         </Heading>
@@ -100,8 +100,8 @@ export default function VestingEscrow() {
         </Text>
       </div>
 
-      <div className="w-full grid grid-cols-1 lg:grid-cols-5 gap-8">
-        <div className="lg:col-span-3 space-y-8">
+      <div className="w-full grid grid-cols-1 lg:grid-cols-5 gap-4 sm:gap-6 lg:gap-8">
+        <div className="lg:col-span-3 space-y-4 sm:space-y-6 lg:space-y-8">
           <VestingGrantList grants={grants} onClaim={handleClaim} />
 
           <TransactionSimulationPanel
diff --git a/frontend/src/pages/WebhookSettings.tsx b/frontend/src/pages/WebhookSettings.tsx
index ece721a3..80966632 100644
--- a/frontend/src/pages/WebhookSettings.tsx
+++ b/frontend/src/pages/WebhookSettings.tsx
@@ -102,10 +102,10 @@ export default function WebhookSettings() {
   };
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-start p-12 max-w-3xl mx-auto w-full">
-      <div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
+    <div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-3xl mx-auto w-full">
+      <div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
         <div>
-          <h1 className="text-4xl font-black mb-2 tracking-tight">{t('webhooks.title')}</h1>
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">{t('webhooks.title')}</h1>
           <p className="text-sm text-muted mt-2">{t('webhooks.subtitle')}</p>
         </div>
       </div>
@@ -114,7 +114,7 @@ export default function WebhookSettings() {
         onSubmit={(event) => {
           void handleCreate(event);
         }}
-        className="w-full card glass noise p-8 mb-8"
+        className="w-full card glass noise p-4 sm:p-6 lg:p-8 mb-8"
       >
         <h2 className="text-lg font-bold mb-4 flex items-center gap-2">
           <Plus className="w-5 h-5" />
@@ -192,7 +192,7 @@ export default function WebhookSettings() {
         </div>
       </form>
 
-      <div className="w-full card glass noise p-8">
+      <div className="w-full card glass noise p-4 sm:p-6 lg:p-8">
         <h2 className="text-lg font-bold mb-4 flex items-center gap-2">
           <Webhook className="w-5 h-5" />
           {t('webhooks.listTitle')}
@@ -219,10 +219,10 @@ export default function WebhookSettings() {
             {subscriptions.map((subscription) => (
               <li
                 key={subscription.id}
-                className="flex items-center justify-between gap-4 bg-black/20 border border-hi rounded-xl p-4"
+                className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 bg-black/20 border border-hi rounded-xl p-4"
               >
                 <div className="min-w-0">
-                  <p className="font-mono text-sm truncate">{subscription.url}</p>
+                  <p className="font-mono text-sm break-all sm:truncate">{subscription.url}</p>
                   <div className="flex flex-wrap gap-1 mt-2">
                     {subscription.events.map((eventName) => (
                       <span