fix: modal scroll fixes (#1607)

polkadot-cloud · Nov 7, 2023 · 4d03b33 · 4d03b33
1 parent a03faa6
commit 4d03b33
Show file tree

Hide file tree

Showing 19 changed files with 214 additions and 195 deletions.
diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@ledgerhq/hw-transport-webhid": "^6.27.19",
     "@polkadot-cloud/assets": "^0.1.34",
-    "@polkadot-cloud/core": "^1.0.43",
-    "@polkadot-cloud/react": "^0.1.121",
+    "@polkadot-cloud/core": "^1.0.44",
+    "@polkadot-cloud/react": "^0.1.123",
     "@polkadot-cloud/utils": "^0.0.25",
     "@polkadot/api": "^10.10.1",
     "@polkadot/keyring": "^12.1.1",

diff --git a/src/modals/ClaimPayouts/Forms.tsx b/src/modals/ClaimPayouts/Forms.tsx
@@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import {
   ActionItem,
   ButtonSubmitInvert,
+  ModalPadding,
   ModalWarnings,
 } from '@polkadot-cloud/react';
 import { planckToUnit } from '@polkadot-cloud/utils';
@@ -124,7 +125,7 @@ export const Forms = forwardRef(
     return (
       <ContentWrapper>
         <div ref={ref}>
-          <div className="padding">
+          <ModalPadding horizontalOnly>
             {warnings.length > 0 ? (
               <ModalWarnings withMargin>
                 {warnings.map((text, i) => (
@@ -141,7 +142,7 @@ export const Forms = forwardRef(
               />
               <p>{t('afterClaiming')}</p>
             </div>
-          </div>
+          </ModalPadding>
           <SubmitTx
             fromController={false}
             valid={valid}

diff --git a/src/modals/ClaimPayouts/Overview.tsx b/src/modals/ClaimPayouts/Overview.tsx
@@ -1,7 +1,7 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { ModalNotes } from '@polkadot-cloud/react';
+import { ModalNotes, ModalPadding } from '@polkadot-cloud/react';
 import type { Ref } from 'react';
 import { Fragment, forwardRef } from 'react';
 import { usePayouts } from 'contexts/Payouts';
@@ -18,7 +18,7 @@ export const Overview = forwardRef(
 
     return (
       <ContentWrapper>
-        <div className="padding" ref={ref}>
+        <ModalPadding horizontalOnly ref={ref}>
           {Object.entries(unclaimedPayouts || {}).map(
             ([era, unclaimedPayout], i) =>
               getTotalPayout(unclaimedPayout).isZero() ? (
@@ -37,7 +37,7 @@ export const Overview = forwardRef(
             <p>{t('claimsOnBehalf')}</p>
             <p>{t('notToClaim')}</p>
           </ModalNotes>
-        </div>
+        </ModalPadding>
       </ContentWrapper>
     );
   }

diff --git a/src/modals/ClaimPayouts/Wrappers.ts b/src/modals/ClaimPayouts/Wrappers.ts
@@ -4,17 +4,10 @@
 import styled from 'styled-components';
 
 export const ContentWrapper = styled.div`
-  border-radius: 1rem;
   display: flex;
   flex-flow: column nowrap;
-  flex-basis: 50%;
-  flex-grow: 0;
-  flex-shrink: 1;
-  height: fit-content;
-
-  .padding {
-    padding: 0 1rem;
-  }
+  border-radius: 1rem;
+  width: 100%;
 
   > div:last-child {
     margin-bottom: 0;

diff --git a/src/modals/ClaimPayouts/index.tsx b/src/modals/ClaimPayouts/index.tsx
@@ -21,7 +21,7 @@ export const ClaimPayouts = () => {
   const { t } = useTranslation('modals');
   const { notEnoughFunds } = useTxMeta();
   const { unclaimedPayouts } = usePayouts();
-  const { setModalHeight } = useOverlay().modal;
+  const { setModalHeight, modalMaxHeight } = useOverlay().modal;
 
   // Active modal section.
   const [section, setSectionState] = useState(0);
@@ -70,6 +70,9 @@ export const ClaimPayouts = () => {
         <Title title={t('claimPayouts')} fixed />
       </ModalFixedTitle>
       <ModalMotionTwoSection
+        style={{
+          maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0),
+        }}
         animate={sectionRef.current === 0 ? 'home' : 'next'}
         transition={{
           duration: 0.5,
@@ -85,17 +88,21 @@ export const ClaimPayouts = () => {
           },
         }}
       >
-        <Overview
-          setSection={setSection}
-          setPayouts={setPayouts}
-          ref={overviewRef}
-        />
-        <Forms
-          ref={formsRef}
-          payouts={payouts}
-          setPayouts={setPayouts}
-          setSection={setSection}
-        />
+        <div className="section">
+          <Overview
+            setSection={setSection}
+            setPayouts={setPayouts}
+            ref={overviewRef}
+          />
+        </div>
+        <div className="section">
+          <Forms
+            ref={formsRef}
+            payouts={payouts}
+            setPayouts={setPayouts}
+            setSection={setSection}
+          />
+        </div>
       </ModalMotionTwoSection>
     </ModalSection>
   );

diff --git a/src/modals/ManagePool/Forms/ClaimCommission.tsx b/src/modals/ManagePool/Forms/ClaimCommission.tsx
@@ -6,6 +6,7 @@ import {
   ActionItem,
   ButtonSubmitInvert,
   ModalNotes,
+  ModalPadding,
   ModalWarnings,
 } from '@polkadot-cloud/react';
 import { greaterThanZero, planckToUnit, rmCommas } from '@polkadot-cloud/utils';
@@ -70,7 +71,7 @@ export const ClaimCommission = ({ setSection }: any) => {
 
   return (
     <>
-      <div className="padding">
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
           <ModalWarnings withMargin>
             {warnings.map((text, i) => (
@@ -87,7 +88,7 @@ export const ClaimCommission = ({ setSection }: any) => {
         <ModalNotes>
           <p>{t('sentToCommissionPayee')}</p>
         </ModalNotes>
-      </div>
+      </ModalPadding>
       <SubmitTx
         valid={valid}
         buttons={[

diff --git a/src/modals/ManagePool/Forms/Commission.tsx b/src/modals/ManagePool/Forms/Commission.tsx
@@ -6,6 +6,7 @@ import {
   ActionItem,
   ButtonHelp,
   ButtonSubmitInvert,
+  ModalPadding,
   ModalWarnings,
 } from '@polkadot-cloud/react';
 import { rmCommas } from '@polkadot-cloud/utils';
@@ -448,7 +449,7 @@ export const Commission = ({ setSection, incrementCalculateHeight }: any) => {
 
   return (
     <>
-      <div className="padding">
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
           <ModalWarnings withMargin>
             {warnings.map((text, i) => (
@@ -634,7 +635,7 @@ export const Commission = ({ setSection, incrementCalculateHeight }: any) => {
             </p>
           </SliderWrapper>
         )}
-      </div>
+      </ModalPadding>
       <SubmitTx
         valid={valid}
         buttons={[

diff --git a/src/modals/ManagePool/Forms/LeavePool.tsx b/src/modals/ManagePool/Forms/LeavePool.tsx
@@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import {
   ActionItem,
   ButtonSubmitInvert,
+  ModalPadding,
   ModalWarnings,
 } from '@polkadot-cloud/react';
 import {
@@ -118,7 +119,7 @@ export const LeavePool = ({ setSection }: any) => {
 
   return (
     <>
-      <div className="padding">
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
           <ModalWarnings withMargin>
             {warnings.map((text, i) => (
@@ -133,7 +134,7 @@ export const LeavePool = ({ setSection }: any) => {
           valueKey="bondDurationFormatted"
           deps={[bondDuration]}
         />
-      </div>
+      </ModalPadding>
       <SubmitTx
         valid={bondValid}
         buttons={[

diff --git a/src/modals/ManagePool/Forms/SetClaimPermission.tsx b/src/modals/ManagePool/Forms/SetClaimPermission.tsx
@@ -2,7 +2,11 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
-import { ButtonSubmitInvert, ModalWarnings } from '@polkadot-cloud/react';
+import {
+  ButtonSubmitInvert,
+  ModalPadding,
+  ModalWarnings,
+} from '@polkadot-cloud/react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
@@ -72,7 +76,7 @@ export const SetClaimPermission = ({ setSection, section }: any) => {
 
   return (
     <>
-      <div className="padding">
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
           <ModalWarnings withMargin>
             {warnings.map((text, i) => (
@@ -90,7 +94,7 @@ export const SetClaimPermission = ({ setSection, section }: any) => {
             setClaimPermission(val);
           }}
         />
-      </div>
+      </ModalPadding>
       <SubmitTx
         valid={valid && claimPermission !== membership?.claimPermission}
         buttons={[

diff --git a/src/modals/ManagePool/Forms/SetMetadata.tsx b/src/modals/ManagePool/Forms/SetMetadata.tsx
@@ -3,7 +3,11 @@
 
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import { u8aToString, u8aUnwrapBytes } from '@polkadot/util';
-import { ButtonSubmitInvert, ModalWarnings } from '@polkadot-cloud/react';
+import {
+  ButtonSubmitInvert,
+  ModalPadding,
+  ModalWarnings,
+} from '@polkadot-cloud/react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useApi } from 'contexts/Api';
@@ -80,7 +84,7 @@ export const SetMetadata = ({ setSection, section }: any) => {
 
   return (
     <>
-      <div className="padding">
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
           <ModalWarnings withMargin>
             {warnings.map((text, i) => (
@@ -99,7 +103,7 @@ export const SetMetadata = ({ setSection, section }: any) => {
           value={metadata ?? ''}
         />
         <p>{t('storedOnChain')}</p>
-      </div>
+      </ModalPadding>
       <SubmitTx
         valid={valid}
         buttons={[

diff --git a/src/modals/ManagePool/Forms/SetState.tsx b/src/modals/ManagePool/Forms/SetState.tsx
@@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import {
   ActionItem,
   ButtonSubmitInvert,
+  ModalPadding,
   ModalWarnings,
 } from '@polkadot-cloud/react';
 import { useEffect, useState } from 'react';
@@ -129,7 +130,7 @@ export const SetState = ({ setSection, task }: any) => {
 
   return (
     <>
-      <div className="padding">
+      <ModalPadding horizontalOnly>
         {warnings.length > 0 ? (
           <ModalWarnings withMargin>
             {warnings.map((text, i) => (
@@ -139,7 +140,7 @@ export const SetState = ({ setSection, task }: any) => {
         ) : null}
         {content.title}
         {content.message}
-      </div>
+      </ModalPadding>
       <SubmitTx
         valid={valid}
         buttons={[