fix: scrollbars from padding changes

leather-io · May 16, 2022 · 1038ddb · 1038ddb
1 parent 675c8e3
commit 1038ddb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 33 deletions.
diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx
@@ -8,7 +8,6 @@ import { useWallet } from '@app/common/hooks/use-wallet';
 import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
 import { Header } from '@app/components/header';
 import { Accounts } from '@app/pages/choose-account/components/accounts';
-import { POPUP_CENTER_WIDTH } from '@shared/constants';
 
 export const ChooseAccount = memo(() => {
   const { name: appName } = useAppDetails();
@@ -26,8 +25,8 @@ export const ChooseAccount = memo(() => {
   }, [handleUnmount]);
 
   return (
-    <Flex alignItems="center" flexDirection="column" px="loose" width="100%">
-      <Stack minWidth={`${POPUP_CENTER_WIDTH}px`} spacing="loose" textAlign="center">
+    <Flex flexDirection="column" px="loose" width="100%">
+      <Stack spacing="loose" textAlign="center">
         <AppIcon mt="extra-loose" mb="loose" size="72px" />
         <Stack spacing="base">
           <Title fontSize={4}>Choose an account</Title>

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -20,7 +20,6 @@ import {
 import { slugify } from '@app/common/utils';
 import { useAccounts, useHasCreatedAccount } from '@app/store/accounts/account.hooks';
 import { useAddressBalances } from '@app/query/balance/balance.hooks';
-import { POPUP_CENTER_WIDTH } from '@shared/constants';
 
 const loadingProps = { color: '#A1A7B3' };
 const getLoadingProps = (loading: boolean) => (loading ? loadingProps : {});
@@ -151,7 +150,7 @@ export const Accounts = memo(() => {
   return (
     <>
       <AddAccountAction />
-      <Box minWidth={`${POPUP_CENTER_WIDTH}px`} mt="base" px="loose">
+      <Box mt="base">
         <Virtuoso
           useWindowScroll
           data={accounts}

diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect } from 'react';
 import { Formik } from 'formik';
 import * as yup from 'yup';
-import { Flex, Stack } from '@stacks/ui';
+import { Stack } from '@stacks/ui';
 
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useFeeSchema } from '@app/common/validation/use-fee-schema';
@@ -88,33 +88,31 @@ function TransactionRequestBase(): JSX.Element | null {
   if (!transactionRequest) return null;
 
   return (
-    <Flex alignItems="center" flexDirection="column" width="100%">
-      <Stack px="loose" spacing="loose">
-        <PageTop />
-        <PostConditionModeWarning />
-        <TransactionError />
-        <PostConditions />
-        {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
-        {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
-        {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
-        <Formik
-          initialValues={{ fee: '', feeType: Estimations[Estimations.Middle] }}
-          onSubmit={onSubmit}
-          validateOnChange={false}
-          validateOnBlur={false}
-          validateOnMount={false}
-          validationSchema={validationSchema}
-        >
-          {() => (
-            <>
-              <FeeForm />
-              <SubmitAction />
-              <HighFeeDrawer />
-            </>
-          )}
-        </Formik>
-      </Stack>
-    </Flex>
+    <Stack px="loose" spacing="loose">
+      <PageTop />
+      <PostConditionModeWarning />
+      <TransactionError />
+      <PostConditions />
+      {transactionRequest.txType === 'contract_call' && <ContractCallDetails />}
+      {transactionRequest.txType === 'token_transfer' && <StxTransferDetails />}
+      {transactionRequest.txType === 'smart_contract' && <ContractDeployDetails />}
+      <Formik
+        initialValues={{ fee: '', feeType: Estimations[Estimations.Middle] }}
+        onSubmit={onSubmit}
+        validateOnChange={false}
+        validateOnBlur={false}
+        validateOnMount={false}
+        validationSchema={validationSchema}
+      >
+        {() => (
+          <>
+            <FeeForm />
+            <SubmitAction />
+            <HighFeeDrawer />
+          </>
+        )}
+      </Formik>
+    </Stack>
   );
 }