fix(suite): custom fee UI

trezor · Mar 13, 2023 · c9f993d · c9f993d
1 parent 83d2382
commit c9f993d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 16 deletions.
diff --git a/packages/suite/src/components/wallet/Fees/components/CustomFee.tsx b/packages/suite/src/components/wallet/Fees/components/CustomFee.tsx
@@ -15,6 +15,7 @@ import { TypedValidationRules } from '@wallet-types/form';
 const Wrapper = styled.div`
     display: flex;
     width: 100%;
+    gap: 10px;
 
     ${variables.SCREEN_QUERY.BELOW_LAPTOP} {
         flex-direction: column;
@@ -28,27 +29,16 @@ const Col = styled.div<{ singleCol?: boolean }>`
     ${({ singleCol }) =>
         singleCol &&
         css`
-            max-width: 270px;
-
             ${variables.SCREEN_QUERY.BELOW_LAPTOP} {
                 max-width: 100%;
             }
         `}
 `;
 
-const Spacer = styled.div`
-    display: flex;
-    width: 24px;
-
-    ${variables.SCREEN_QUERY.BELOW_LAPTOP} {
-        display: none;
-    }
-`;
-
 const StyledInput = styled(Input)`
     display: flex;
     flex: 1;
-    min-width: 270px;
+    width: 100%;
 `;
 
 const Units = styled.div`
@@ -201,7 +191,7 @@ export const CustomFee = ({
     };
 
     return (
-        <div>
+        <>
             <Wrapper>
                 {useFeeLimit ? (
                     <>
@@ -222,8 +212,6 @@ export const CustomFee = ({
                                 bottomText={<InputError error={feeLimitError} />}
                             />
                         </Col>
-
-                        <Spacer />
                     </>
                 ) : (
                     <input type="hidden" name={FEE_LIMIT} ref={register()} />
@@ -252,6 +240,6 @@ export const CustomFee = ({
                     <Translation id="TR_FEE_ROUNDING_WARNING" />
                 </Note>
             )}
-        </div>
+        </>
     );
 };
diff --git a/packages/suite/src/components/wallet/Fees/index.tsx b/packages/suite/src/components/wallet/Fees/index.tsx
@@ -78,6 +78,7 @@ const FeeError = styled.div`
 const FeeInfoWrapper = styled.div`
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
 `;
 
 const Label = styled.div<Pick<FeesProps, 'rbfForm'>>`