Fix broken scroll on "Import wallet from recovery phrase" view (#2592) (#2608)

Co-authored-by: Miguel Nieto <miguelnietoarias3@gmail.com>

Author: piyalbasu

extension/src/popup/views/RecoverAccount/index.tsx

@@ -143,22 +143,17 @@ export const RecoverAccount = () => {
 
   useEffect(() => {
     const phraseInputsArr: string[] = [];
-    let PHRASE_LENGTH = SHORT_PHRASE;
+    const PHRASE_LENGTH = isLongPhrase ? LONG_PHRASE : SHORT_PHRASE;
 
-    // delay to account for css transition
-    setTimeout(() => {
-      PHRASE_LENGTH = isLongPhrase ? LONG_PHRASE : SHORT_PHRASE;
-
-      for (let i = 1; i <= PHRASE_LENGTH; i++) {
-        phraseInputsArr.push(`MnemonicPhrase-${i}`);
-      }
-      setPhraseInputs(phraseInputsArr);
+    for (let i = 1; i <= PHRASE_LENGTH; i++) {
+      phraseInputsArr.push(`MnemonicPhrase-${i}`);
+    }
+    setPhraseInputs(phraseInputsArr);
 
-      if (PHRASE_LENGTH === SHORT_PHRASE) {
-        // when going back to 12 words, clear all the fields
-        setMnemonicPhraseArr([]);
-      }
-    }, 150);
+    if (PHRASE_LENGTH === SHORT_PHRASE) {
+      // when going back to 12 words, clear all the fields
+      setMnemonicPhraseArr([]);
+    }
   }, [isLongPhrase]);
 
   useEffect(() => {
@@ -253,13 +248,7 @@ export const RecoverAccount = () => {
                       >
                         <Card variant="primary">
                           <div className="RecoverAccount__mnemonic-wrapper">
-                            <div
-                              className={`RecoverAccount__mnemonic-input ${
-                                isLongPhrase
-                                  ? "RecoverAccount__mnemonic-input--long-phrase"
-                                  : ""
-                              }`}
-                            >
+                            <div className="RecoverAccount__mnemonic-input">
                               {phraseInputs.map((phraseInput, i) => (
                                 <PhraseInput
                                   key={phraseInput}

extension/src/popup/views/RecoverAccount/styles.scss

@@ -7,23 +7,18 @@
   margin-top: #{pxToRem(121px)};
 
   &__mnemonic-wrapper {
-    overflow: scroll;
+    overflow: auto;
     height: #{pxToRem(246px)};
+    scrollbar-width: thin;
   }
 
   &__mnemonic-input {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
     gap: #{pxToRem(6px)} #{pxToRem(16px)};
-    max-height: #{pxToRem(244px)};
-    overflow: hidden;
     padding: #{pxToRem(3px)} #{pxToRem(6px)};
     position: relative;
-    transition: max-height var(--dropdown-animation);
-
-    &--long-phrase {
-      max-height: 48rem;
-    }
   }
 
   &__phrase-input {