fix: make modals responsive

forbole · Mar 7, 2024 · cd9aba7 · cd9aba7
1 parent 4721544
commit cd9aba7
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/src/features/core/components/common-modal.tsx b/src/features/core/components/common-modal.tsx
@@ -44,6 +44,7 @@ const CommonModal = ({ children, ...props }: Props) => {
           minWidth: "100vw",
           outline: "none",
           overflow: "auto",
+          padding: "0",
           pointerEvents: "none",
           position: "fixed",
           right: "auto",
@@ -56,7 +57,7 @@ const CommonModal = ({ children, ...props }: Props) => {
       }}
     >
       <div
-        className="relative w-full"
+        className="relative w-full overflow-auto px-[16px] py-[40px] md:p-[50px]"
         style={{
           backgroundColor: "#000",
           borderRadius: "48px",
@@ -68,7 +69,6 @@ const CommonModal = ({ children, ...props }: Props) => {
           margin: "auto",
           maxWidth: "100vw",
           outline: "none",
-          padding: "50px",
           pointerEvents: "auto",
           position: "relative",
           width: "min-content",

diff --git a/src/features/staking/components/modals/cancel-unstaking.tsx b/src/features/staking/components/modals/cancel-unstaking.tsx
@@ -113,7 +113,7 @@ const CancelUnstakingModal = () => {
         stakingRef.staking.dispatch(setModalOpened(null));
       }}
     >
-      <div className="min-w-[390px]">{content}</div>
+      <div className="min-w-[90vw] md:min-w-[390px]">{content}</div>
     </CommonModal>
   );
 };

diff --git a/src/features/staking/components/modals/rewards.tsx b/src/features/staking/components/modals/rewards.tsx
@@ -122,7 +122,7 @@ const RewardsModal = () => {
         stakingRef.staking.dispatch(setModalOpened(null));
       }}
     >
-      <div className="min-w-[390px]">{content}</div>
+      <div className="min-w-[90vw] md:min-w-[390px]">{content}</div>
     </CommonModal>
   );
 };

diff --git a/src/features/staking/components/modals/staking.tsx b/src/features/staking/components/modals/staking.tsx
@@ -83,7 +83,7 @@ const StakingModal = () => {
         stakingRef.staking.dispatch(setModalOpened(null));
       }}
     >
-      <div className="min-w-[390px]">
+      <div className="min-w-[90vw] md:min-w-[390px]">
         {(() => {
           const getStakingSummary = () => (
             <>

diff --git a/src/features/staking/components/modals/unstaking.tsx b/src/features/staking/components/modals/unstaking.tsx
@@ -111,7 +111,7 @@ const UnstakingModal = () => {
         stakingRef.staking.dispatch(setModalOpened(null));
       }}
     >
-      <div className="min-w-[390px]">
+      <div className="min-w-[90vw] md:min-w-[390px]">
         {(() => {
           const getUnstakingSummary = () => (
             <>

diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
@@ -99,7 +99,7 @@ export default function ValidatorPage() {
             borderRadius: 16,
           }}
         >
-          <div className="flex w-full flex-row items-center gap-[16px]">
+          <div className="flex w-full min-w-[1000px] flex-row items-center gap-[16px]">
             <img
               alt="Validator logo"
               className="block w-[80px] rounded-full"