From 47215443b3b7d0e84120922ba5309d431ff7331a Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 7 Mar 2024 17:48:24 +0800
Subject: [PATCH] fix: improve responsive display

---
 .../staking/components/delegation-details.tsx        |  4 +++-
 src/features/staking/components/divisor.tsx          |  4 ++--
 .../staking/components/validator-delegation.tsx      |  6 +++---
 src/features/staking/components/validator-page.tsx   | 12 ++++++------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
index b18a283..747d73a 100644
--- a/src/features/staking/components/delegation-details.tsx
+++ b/src/features/staking/components/delegation-details.tsx
@@ -66,13 +66,15 @@ export const DetailsTrigger = ({
 const gridStyle = {
   gap: "16px",
   gridTemplateColumns: "60px 1.5fr repeat(4, 1fr)",
+  minWidth: 800,
+  overflow: "auto",
 };
 
 const rowStyle =
   "grid w-full items-center justify-between gap-2 p-2 mb-[24px] last:mb-[0px] bg-black rounded-[8px]";
 
 const wrapperStyle =
-  "w-full overflow-hidden rounded-[24px] bg-bg-600 pb-4 text-typo-100 px-[16px]";
+  "w-full overflow-auto rounded-[24px] bg-bg-600 pb-4 text-typo-100 px-[16px]";
 
 const Menu = () => (
   <span
diff --git a/src/features/staking/components/divisor.tsx b/src/features/staking/components/divisor.tsx
index b1bf547..0fff870 100644
--- a/src/features/staking/components/divisor.tsx
+++ b/src/features/staking/components/divisor.tsx
@@ -1,5 +1,5 @@
-export const DivisorHorizontal = () => (
-  <div className="h-[1px] w-full bg-bg-400" />
+export const DivisorHorizontal = ({ className }: { className?: string }) => (
+  <div className={["h-[1px] w-full bg-bg-400", className || ""].join(" ")} />
 );
 
 export const DivisorVertical = () => (
diff --git a/src/features/staking/components/validator-delegation.tsx b/src/features/staking/components/validator-delegation.tsx
index 2f54424..95b4208 100644
--- a/src/features/staking/components/validator-delegation.tsx
+++ b/src/features/staking/components/validator-delegation.tsx
@@ -75,7 +75,7 @@ export default function ValidatorDelegation() {
   const canShowDetail = getCanShowDetails(staking.state);
 
   const content = !isConnected ? (
-    <div className="flex h-[220px] flex-col items-center justify-center gap-[32px] rounded-[24px] bg-bg-600 uppercase">
+    <div className="flex h-[220px] min-w-[1000px] flex-col items-center justify-center gap-[32px] rounded-[24px] bg-bg-600 uppercase">
       <HeroText>Please log in to view</HeroText>
       <div>
         <Button
@@ -89,7 +89,7 @@ export default function ValidatorDelegation() {
       </div>
     </div>
   ) : (
-    <div className="grid grid-cols-4 rounded-[24px] bg-bg-600 p-[24px]">
+    <div className="grid min-w-[1000px] grid-cols-4 rounded-[24px] bg-bg-600 p-[24px]">
       <div className="relative">
         <Heading8>Claimable Rewards</Heading8>
         <div className="mb-[8px] mt-[12px] flex flex-row items-center gap-[8px]">
@@ -180,7 +180,7 @@ export default function ValidatorDelegation() {
           />
         )}
       </div>
-      {content}
+      <div className="w-full overflow-auto">{content}</div>
       {canShowDetail && isShowingDetails && <DelegationDetails />}
     </>
   );
diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
index 692c37a..c308396 100644
--- a/src/features/staking/components/validator-page.tsx
+++ b/src/features/staking/components/validator-page.tsx
@@ -92,14 +92,14 @@ export default function ValidatorPage() {
           <span>{validatorDetails.description.moniker}</span>
         </div>
         <div
-          className="flex flex-col gap-[24px] p-[24px]"
+          className="flex flex-col gap-[24px] overflow-auto p-[24px]"
           style={{
             backgroundImage: `url(${basePath}/overview-bg.png)`,
             backgroundSize: "cover",
             borderRadius: 16,
           }}
         >
-          <div className="flex flex-row items-center gap-[16px]">
+          <div className="flex w-full flex-row items-center gap-[16px]">
             <img
               alt="Validator logo"
               className="block w-[80px] rounded-full"
@@ -133,8 +133,8 @@ export default function ValidatorPage() {
               </div>
             )}
           </div>
-          <DivisorHorizontal />
-          <div className="grid grid-cols-4">
+          <DivisorHorizontal className="min-w-[1000px]" />
+          <div className="grid min-w-[1000px] grid-cols-4">
             <div className="relative">
               <Heading8>Total Stake (XION)</Heading8>
               <div className="mb-[8px] mt-[12px]">
@@ -184,8 +184,8 @@ export default function ValidatorPage() {
               <Heading8>{formatXionToUSD(myDelegationToValidator)}</Heading8>
             </div>
           </div>
-          <DivisorHorizontal />
-          <div className="grid grid-cols-4">
+          <DivisorHorizontal className="min-w-[1000px]" />
+          <div className="grid min-w-[1000px] grid-cols-4">
             <div className="col-span-2">
               <Heading8 color="text-white">XION Address</Heading8>
               <div className="inline-flex flex-row gap-2 break-all">