Merge pull request #12098 from MetaMask/dev_12088

Scroll all inputs into view when clicking Advanced options in gas edit modal

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({
             </button>
           </div>
         )}
+      <div ref={scrollRef} className="edit-gas-display__scroll-bottom" />
     </div>
   );
 }

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;
+  }
 }