refactor(suite): Change alignItems default value (#15609)

trezor · Nov 28, 2024 · ba7a09c · ba7a09c
1 parent caba776
commit ba7a09c
Show file tree

Hide file tree

Showing 99 changed files with 143 additions and 155 deletions.
diff --git a/packages/components/src/components/Banner/Banner.tsx b/packages/components/src/components/Banner/Banner.tsx
@@ -110,14 +110,13 @@ export const Banner = ({
     const ContentComponent = ({ children }: { children: ReactNode }) => {
         const commonProps = {
             justifyContent: 'space-between' as const,
+            alignItems: 'center' as const,
             gap: spacings.lg,
             flex: '1' as const,
         };
 
         return isMobile ? (
-            <Column {...commonProps} alignItems="stretch">
-                {children}
-            </Column>
+            <Column {...commonProps}>{children}</Column>
         ) : (
             <Row {...commonProps}>{children}</Row>
         );

diff --git a/packages/components/src/components/Flex/Flex.tsx b/packages/components/src/components/Flex/Flex.tsx
@@ -160,7 +160,7 @@ export type FlexProps = AllowedFrameProps & {
 export const Flex = ({
     gap = 0,
     justifyContent = 'flex-start',
-    alignItems = 'center',
+    alignItems = 'normal',
     children,
     direction = 'row',
     flex = 'initial',
@@ -207,4 +207,4 @@ export const Flex = ({
 };
 
 export const Column = (props: FlexProps) => <Flex {...props} direction="column" />;
-export const Row = (props: FlexProps) => <Flex {...props} direction="row" />;
+export const Row = (props: FlexProps) => <Flex alignItems="center" {...props} direction="row" />;
diff --git a/packages/components/src/components/Tabs/Tabs.stories.tsx b/packages/components/src/components/Tabs/Tabs.stories.tsx
@@ -79,7 +79,7 @@ const TabsApp = (props: Partial<TabsProps>) => {
     };
 
     return (
-        <Column alignItems="normal" gap={spacings.md}>
+        <Column gap={spacings.md}>
             <TabsComponent activeItemId={items[selectedTab].id} {...props}>
                 {items.map(item => (
                     <TabsComponent.Item key={item.id} {...item}>

diff --git a/packages/components/src/components/form/FormCell/FormCell.tsx b/packages/components/src/components/form/FormCell/FormCell.tsx
@@ -84,7 +84,7 @@ export const FormCell = ({
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
         >
-            <Column alignItems="stretch" gap={spacings.xs}>
+            <Column gap={spacings.xs}>
                 <TopAddons
                     isHovered={isHovered}
                     addonLeft={labelLeft}

diff --git a/packages/connect-ui/src/components/Passphrase/PassphraseTypeCardContent.tsx b/packages/connect-ui/src/components/Passphrase/PassphraseTypeCardContent.tsx
@@ -127,7 +127,7 @@ export const PassphraseTypeCardContent = ({
 
     return (
         <Card paddingType="small">
-            <Column gap={spacings.sm} alignItems="stretch">
+            <Column gap={spacings.sm}>
                 {type === 'hidden' && (
                     <>
                         <Row flex="1">

diff --git a/packages/connect-ui/src/components/Passphrase/PassphraseTypeCardHeading.tsx b/packages/connect-ui/src/components/Passphrase/PassphraseTypeCardHeading.tsx
@@ -68,7 +68,7 @@ export const PassphraseTypeCardHeading = ({
                     <Icon size={24} name="lock" color={theme.iconSubdued} />
                 )}
             </IconWrapper>
-            <Column justifyContent="center" flex="1">
+            <Column justifyContent="center" flex="1" alignItems="center">
                 <WalletTitle
                     $withMargin={type === 'hidden'}
                     data-testid={type === 'hidden' && '@tooltip/passphrase-tooltip'}

diff --git a/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardContent.tsx
@@ -136,7 +136,7 @@ export const PassphraseTypeCardContent = ({
 
     return (
         <Card paddingType="small">
-            <Column gap={spacings.sm} alignItems="stretch">
+            <Column gap={spacings.sm}>
                 {type === 'hidden' && (
                     <>
                         <Row flex="1">

diff --git a/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardHeading.tsx b/packages/product-components/src/components/PassphraseTypeCard/PassphraseTypeCardHeading.tsx
@@ -68,7 +68,7 @@ export const PassphraseTypeCardHeading = ({
                     <Icon size={24} name="lock" color={theme.iconSubdued} />
                 )}
             </IconWrapper>
-            <Column justifyContent="center" flex="1">
+            <Column justifyContent="center" flex="1" alignItems="center">
                 <WalletTitle
                     $withMargin={type === 'hidden'}
                     data-testid={type === 'hidden' && '@tooltip/passphrase-tooltip'}

diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx
@@ -72,7 +72,7 @@ export const AssetItem = ({
                 ) : (
                     symbol && <CoinLogo size={24} symbol={symbol} />
                 )}
-                <Column flex="1" alignItems="stretch">
+                <Column flex="1">
                     <Row gap={spacings.xs} alignItems="center">
                         <TextWrapper>
                             <Text typographyStyle="body" textWrap="nowrap">

diff --git a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx
@@ -62,7 +62,7 @@ export const SelectAssetModal = ({
             onCancel={onClose}
             size="small"
         >
-            <Column gap={spacings.md} alignItems="stretch">
+            <Column gap={spacings.md}>
                 {searchInput}
 
                 {filterTabs}

diff --git a/packages/suite/src/components/backup/AfterBackupCheckboxes.tsx b/packages/suite/src/components/backup/AfterBackupCheckboxes.tsx
@@ -13,7 +13,7 @@ export const AfterBackupCheckboxes = () => {
 
     return (
         <Card>
-            <Column alignItems="stretch" gap={spacings.xl}>
+            <Column gap={spacings.xl} alignItems="center">
                 <CheckItem
                     data-testid="@backup/check-item/wrote-seed-properly"
                     onClick={() => dispatch(toggleCheckboxByKey('wrote-seed-properly'))}

diff --git a/packages/suite/src/components/backup/PreBackupCheckboxes.tsx b/packages/suite/src/components/backup/PreBackupCheckboxes.tsx
@@ -13,7 +13,7 @@ export const PreBackupCheckboxes = () => {
 
     return (
         <Card>
-            <Column alignItems="stretch" gap={spacings.xl}>
+            <Column gap={spacings.xl}>
                 <CheckItem
                     data-testid="@backup/check-item/has-enough-time"
                     onClick={() => dispatch(toggleCheckboxByKey('has-enough-time'))}

diff --git a/packages/suite/src/components/dashboard/DashboardSection.tsx b/packages/suite/src/components/dashboard/DashboardSection.tsx
@@ -15,7 +15,7 @@ export const DashboardSection = forwardRef(
         ref: Ref<HTMLDivElement>,
     ) => (
         <div ref={ref} {...rest}>
-            <Column alignItems="normal" data-testid={dataTestId}>
+            <Column data-testid={dataTestId}>
                 <Row as="header" justifyContent="space-between" margin={{ bottom: spacings.lg }}>
                     {heading && (
                         <H3>

diff --git a/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx b/packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx
@@ -164,7 +164,7 @@ export const ReconnectDevicePrompt = ({ onClose, onSuccess }: ReconnectDevicePro
                 }
             >
                 {!isRebootDone && (
-                    <Column margin={{ bottom: spacings.md }}>
+                    <Column margin={{ bottom: spacings.md }} alignItems="center">
                         <RebootDeviceGraphics
                             device={uiEvent?.payload.device}
                             isManualRebootRequired={isManualRebootRequired}
@@ -175,7 +175,7 @@ export const ReconnectDevicePrompt = ({ onClose, onSuccess }: ReconnectDevicePro
                     <Translation id={getHeading()} />
                 </H2>
                 {!isRebootDone && (
-                    <Column alignItems="stretch" gap={spacings.lg}>
+                    <Column gap={spacings.lg}>
                         {isManualRebootRequired ? (
                             <List isOrdered margin={{ top: spacings.md }}>
                                 {/* First step asks for disconnecting a device */}

diff --git a/packages/suite/src/components/guide/Guide.tsx b/packages/suite/src/components/guide/Guide.tsx
@@ -77,7 +77,7 @@ export const Guide = () => {
     return (
         <GuideViewWrapper>
             <GuideHeader label={<Translation id="TR_GUIDE_VIEW_HEADLINE_LEARN_AND_DISCOVER" />} />
-            <Column justifyContent="space-between" alignItems="stretch" height="100%">
+            <Column justifyContent="space-between" height="100%">
                 <GuideContent>
                     <GuideSearch pageRoot={indexNode} setSearchActive={setSearchActive} />
                     {!searchActive && <GuideCategories node={indexNode} />}

diff --git a/packages/suite/src/components/settings/SettingsSection.tsx b/packages/suite/src/components/settings/SettingsSection.tsx
@@ -86,7 +86,7 @@ export const SettingsSection = ({
 
             <Content>
                 <Card className={className}>
-                    <Column gap={spacings.xxl} flex="1" alignItems="normal">
+                    <Column gap={spacings.xxl} flex="1">
                         {children}
                     </Column>
                 </Card>

diff --git a/packages/suite/src/components/suite/StakingProcess/InfoRow.tsx b/packages/suite/src/components/suite/StakingProcess/InfoRow.tsx
@@ -22,7 +22,7 @@ export const InfoRow = ({ heading, subheading, content, isExpanded = false }: In
     return (
         <List.Item>
             <Row justifyContent="space-between">
-                <Column alignItems="normal">
+                <Column>
                     {heading}
                     <Subheading isExpanded={isExpanded} subheading={subheading} />
                 </Column>

diff --git a/packages/suite/src/components/suite/modals/ModalSwitcher/DiscoveryLoader.tsx b/packages/suite/src/components/suite/modals/ModalSwitcher/DiscoveryLoader.tsx
@@ -16,6 +16,7 @@ export const DiscoveryLoader = () => {
             <CardWithDevice device={device} isFullHeaderVisible={false}>
                 <Column
                     justifyContent="center"
+                    alignItems="center"
                     margin={{ top: spacings.xxxl, bottom: spacings.xl }}
                 >
                     <Spinner size={80} isGrey={false} />

diff --git a/...ages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx b/...ages/suite/src/components/suite/modals/ReduxModal/ConfirmValueModal/ConfirmValueModal.tsx
@@ -114,7 +114,7 @@ export const ConfirmValueModal = ({
                 description={showTokensSubheading && <Translation id="TR_INCLUDING_TOKENS" />}
                 onCancel={isCancelable ? onCancel : undefined}
             >
-                <Column alignItems="stretch" gap={spacings.xl}>
+                <Column gap={spacings.xl} alignItems="center">
                     {!device?.connected && (
                         <Banner icon="warningTriangle" variant="warning">
                             <Paragraph typographyStyle="hint">
@@ -129,7 +129,7 @@ export const ConfirmValueModal = ({
                         </Banner>
                     )}
                     <Row gap={spacings.xl} alignItems="stretch">
-                        <Column flex="1 1 50%">
+                        <Column flex="1 1 50%" alignItems="center">
                             <Card>
                                 <QrCode
                                     value={value}
@@ -139,12 +139,7 @@ export const ConfirmValueModal = ({
                                 />
                             </Card>
                         </Column>
-                        <Column
-                            flex="1 1 50%"
-                            justifyContent="space-between"
-                            alignItems="stretch"
-                            gap={spacings.lg}
-                        >
+                        <Column flex="1 1 50%" justifyContent="space-between" gap={spacings.lg}>
                             <TransactionReviewOutputElement
                                 indicator={
                                     <TransactionReviewStepIndicator state={state} size={16} />

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseModal.tsx
@@ -87,7 +87,7 @@ export const PassphraseModal = ({ device }: PassphraseModalProps) => {
                     isFullHeaderVisible
                     icon="x"
                 >
-                    <Column gap={spacings.sm} margin={{ top: spacings.xxs }} alignItems="stretch">
+                    <Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
                         <H3>
                             <Translation id="TR_CONFIRM_PASSPHRASE" />
                         </H3>
@@ -119,7 +119,7 @@ export const PassphraseModal = ({ device }: PassphraseModalProps) => {
                     onBackButtonClick={onEnterPassphraseDialogBack}
                     isFullHeaderVisible
                 >
-                    <Column gap={spacings.sm} margin={{ top: spacings.xxs }} alignItems="stretch">
+                    <Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
                         <H3>
                             <Translation id="TR_PASSPHRASE_HIDDEN_WALLET" />
                         </H3>

diff --git a/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx b/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx
@@ -36,7 +36,7 @@ export const PassphraseWalletConfirmationStep1 = ({
     );
 
     return (
-        <Column gap={spacings.sm} margin={{ top: spacings.xxs }} alignItems="stretch">
+        <Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
             <H3>
                 <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_TITLE" />
             </H3>
@@ -61,7 +61,7 @@ export const PassphraseWalletConfirmationStep1 = ({
                     </Row>
                 }
             >
-                <Column gap={spacings.sm}>
+                <Column gap={spacings.sm} alignItems="center">
                     <Paragraph typographyStyle="highlight">
                         <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_DESCRIPTION" />
                     </Paragraph>

diff --git a/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep2.tsx b/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep2.tsx
@@ -14,7 +14,7 @@ type PassphraseWalletConfirmationStep2Props = {
 export const PassphraseWalletConfirmationStep2 = ({
     setContentType,
 }: PassphraseWalletConfirmationStep2Props) => (
-    <Column gap={spacings.sm} margin={{ top: spacings.xxs }} alignItems="stretch">
+    <Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
         <H3>
             <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP2_TITLE" />
         </H3>

diff --git a/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep3.tsx b/...mponents/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep3.tsx
@@ -20,7 +20,7 @@ export const PassphraseWalletConfirmationStep3 = ({
     const deviceFeatures = useSelector(selectDeviceFeatures);
 
     return (
-        <Column gap={spacings.sm} margin={{ top: spacings.xxs }} alignItems="stretch">
+        <Column gap={spacings.sm} margin={{ top: spacings.xxs }}>
             <H3>
                 <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP3_TITLE" />
             </H3>

diff --git a/...odals/ReduxModal/UserContextModal/AddAccountModal/AccountTypeSelect/AccountTypeSelect.tsx b/...odals/ReduxModal/UserContextModal/AddAccountModal/AccountTypeSelect/AccountTypeSelect.tsx
@@ -68,7 +68,7 @@ export const AccountTypeSelect = ({
     const bip43PathToDescribe = selectedAccountType?.bip43Path ?? defaultAccountType.bip43Path;
 
     return (
-        <Column gap={spacings.md}>
+        <Column alignItems="center" gap={spacings.md}>
             <Select
                 data-testid="@add-account-type/select"
                 label={<Translation id="TR_ACCOUNT_TYPE" />}

diff --git a/...s/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx b/...s/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx
@@ -86,7 +86,7 @@ export const ClaimModal = ({ onCancel }: ClaimModalModalProps) => {
             }
         >
             <form onSubmit={handleSubmit(signTx)}>
-                <Column alignItems="normal" gap={spacings.lg}>
+                <Column gap={spacings.lg}>
                     <InfoItem direction="column" label={<Translation id="AMOUNT" />}>
                         <Paragraph typographyStyle="titleSmall">
                             <FormattedCryptoAmount

diff --git a/...src/components/suite/modals/ReduxModal/UserContextModal/DeviceAuthenticityOptOutModal.tsx b/...src/components/suite/modals/ReduxModal/UserContextModal/DeviceAuthenticityOptOutModal.tsx
@@ -47,7 +47,7 @@ export const DeviceAuthenticityOptOutModal = ({ onCancel }: DeviceAuthenticityOp
             <Paragraph variant="tertiary" typographyStyle="hint">
                 <Translation id="TR_DEVICE_AUTHENTICITY_OPT_OUT_MODAL_DESCRIPTION_3" />
             </Paragraph>
-            <Column gap={spacings.sm} margin={{ top: spacings.xl }}>
+            <Column gap={spacings.sm} margin={{ top: spacings.xl }} alignItems="center">
                 <Banner icon="questionFilled">
                     <Translation id="TR_DEVICE_AUTHENTICITY_OPT_OUT_MODAL_DESCRIPTION_1" />
                 </Banner>

diff --git a/...e/src/components/suite/modals/ReduxModal/UserContextModal/FirmwareRevisionOptOutModal.tsx b/...e/src/components/suite/modals/ReduxModal/UserContextModal/FirmwareRevisionOptOutModal.tsx
@@ -47,7 +47,7 @@ export const FirmwareRevisionOptOutModal = ({ onCancel }: DeviceAuthenticityOptO
             <Paragraph variant="tertiary" typographyStyle="hint">
                 <Translation id="TR_DEVICE_FIRMWARE_REVISION_CHECK_MODAL_DESCRIPTION_3" />
             </Paragraph>
-            <Column gap={spacings.sm} margin={{ top: spacings.xl }}>
+            <Column gap={spacings.sm} margin={{ top: spacings.xl }} alignItems="center">
                 <Banner icon="questionFilled">
                     <Translation id="TR_DEVICE_FIRMWARE_REVISION_CHECK_MODAL_DESCRIPTION_1" />
                 </Banner>

diff --git a/...uite/src/components/suite/modals/ReduxModal/UserContextModal/PassphraseDuplicateModal.tsx b/...uite/src/components/suite/modals/ReduxModal/UserContextModal/PassphraseDuplicateModal.tsx
@@ -25,14 +25,14 @@ export const PassphraseDuplicateModal = ({ device, duplicate }: PassphraseDuplic
     return (
         <SwitchDeviceModal>
             <CardWithDevice device={device} isFullHeaderVisible={false}>
-                <Column gap={spacings.xs} margin={{ top: spacings.xxs }} alignItems="stretch">
+                <Column gap={spacings.xs} margin={{ top: spacings.xxs }}>
                     <H3 data-testid="@passphrase-duplicate-header">
                         <Translation id="TR_WALLET_DUPLICATE_TITLE" />
                     </H3>
                     <Text variant="tertiary">
                         <Translation id="TR_WALLET_DUPLICATE_DESC" />
                     </Text>
-                    <Column gap={spacings.xs} margin={{ top: spacings.lg }}>
+                    <Column gap={spacings.xs} margin={{ top: spacings.lg }} alignItems="center">
                         <Button
                             variant="primary"
                             onClick={handleSwitchDevice}

diff --git a/...suite/src/components/suite/modals/ReduxModal/UserContextModal/PassphraseMismatchModal.tsx b/...suite/src/components/suite/modals/ReduxModal/UserContextModal/PassphraseMismatchModal.tsx
@@ -33,11 +33,7 @@ export const PassphraseMismatchModal = ({ onCancel }: { onCancel: () => void })
     return (
         <SwitchDeviceModal data-testid="@passphrase-mismatch">
             <CardWithDevice device={selectDevice} isFullHeaderVisible={false}>
-                <Column
-                    gap={spacings.xs}
-                    margin={{ top: spacings.xxs, bottom: spacings.lg }}
-                    alignItems="stretch"
-                >
+                <Column gap={spacings.xs} margin={{ top: spacings.xxs, bottom: spacings.lg }}>
                     <H3>
                         <Translation id="TR_PASSPHRASE_MISMATCH" />
                     </H3>

diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/QrScannerModal.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/QrScannerModal.tsx
@@ -76,11 +76,11 @@ export const QrScannerModal = ({ decision, onCancel }: QrScannerModalProps) => {
 
     return (
         <NewModal onCancel={onCancel} heading={<Translation id="TR_SCAN_QR_CODE" />}>
-            <Column gap={spacings.md} alignItems="stretch">
+            <Column gap={spacings.md} alignItems="center">
                 <ContentWrapper>
                     {error && (
                         <Card height="100%">
-                            <Column height="100%" justifyContent="center">
+                            <Column height="100%" justifyContent="center" alignItems="center">
                                 <Paragraph variant="destructive">
                                     <Translation id="TR_GENERIC_ERROR_TITLE" />
                                 </Paragraph>
@@ -90,7 +90,12 @@ export const QrScannerModal = ({ decision, onCancel }: QrScannerModalProps) => {
                     )}
                     {!readerLoaded && !error && (
                         <Card height="100%">
-                            <Column height="100%" justifyContent="center" gap={spacings.xxxl}>
+                            <Column
+                                height="100%"
+                                justifyContent="center"
+                                gap={spacings.xxxl}
+                                alignItems="center"
+                            >
                                 <Icon name="qrCode" size={100} />
                                 <Translation id="TR_PLEASE_ALLOW_YOUR_CAMERA" />
                             </Column>

diff --git a/.../modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx b/.../modals/ReduxModal/UserContextModal/StakeEthInANutshellModal/StakeEthInANutshellModal.tsx
@@ -117,7 +117,7 @@ export const StakeEthInANutshellModal = ({ onCancel }: StakeEthInANutshellModalP
                 ))}
             </List>
             <Divider margin={{ top: spacings.xl, bottom: spacings.md }} />
-            <Column alignItems="stretch" gap={spacings.lg}>
+            <Column gap={spacings.lg}>
                 {processes.map(({ heading, badge, content }, index) => (
                     <CollapsibleBox
                         key={index}

diff --git a/...suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx b/...suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/ConfirmStakeEthModal.tsx
@@ -57,11 +57,7 @@ export const ConfirmStakeEthModal = ({
                 </>
             }
         >
-            <Column
-                gap={spacings.sm}
-                margin={{ top: spacings.xxs, bottom: spacings.lg }}
-                alignItems="stretch"
-            >
+            <Column gap={spacings.sm} margin={{ top: spacings.xxs, bottom: spacings.lg }}>
                 <Banner icon="clock">
                     <Translation
                         id="TR_STAKE_ENTERING_POOL_MAY_TAKE"

diff --git a/...rc/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx b/...rc/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx
@@ -72,7 +72,7 @@ export const Inputs = () => {
         isLessAmountForWithdrawalWarningShown || isAmountForWithdrawalWarningShown;
 
     return (
-        <Column alignItems="normal" gap={spacings.sm}>
+        <Column gap={spacings.sm}>
             <NumberInput
                 name={CRYPTO_INPUT}
                 labelLeft={