diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js index 07a201117..ff1fa5e68 100644 --- a/ui/components/app/edit-gas-display/edit-gas-display.component.js +++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useLayoutEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import PropTypes from 'prop-types'; @@ -70,6 +70,8 @@ export default function EditGasDisplay({ txParamsHaveBeenCustomized, }) { const t = useContext(I18nContext); + const scrollRef = useRef(null); + const isMainnet = useSelector(getIsMainnet); const networkAndAccountSupport1559 = useSelector( checkNetworkAndAccountSupports1559, @@ -87,6 +89,12 @@ export default function EditGasDisplay({ showAdvancedInlineGasIfPossible, ); + useLayoutEffect(() => { + if (showAdvancedForm && scrollRef.current) { + scrollRef.current.scrollIntoView(); + } + }, [showAdvancedForm]); + const dappSuggestedAndTxParamGasFeesAreTheSame = areDappSuggestedAndTxParamGasFeesTheSame( transaction, ); @@ -285,6 +293,7 @@ export default function EditGasDisplay({ )} +
); } diff --git a/ui/components/app/edit-gas-display/index.scss b/ui/components/app/edit-gas-display/index.scss index 2f6c1abf0..d109003ec 100644 --- a/ui/components/app/edit-gas-display/index.scss +++ b/ui/components/app/edit-gas-display/index.scss @@ -67,4 +67,9 @@ position: relative; margin-top: 4px; } + + &__scroll-bottom { + margin-bottom: -20px; + margin-top: 20px; + } }