Fix permission site origin overflow (#13868)

* Fix permission site origin overflow

* Standardize connect flow a bit

* Another standardization change

* Fix another chip width issue

* Standardize snap install

* Fix lint

* Fix overflow after rebase

ui/components/app/permissions-connect-header/index.scss

@@ -1,7 +1,9 @@
 .permissions-connect-header {
   flex: 0;
+  width: 100%;
 
   &__icon {
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;

ui/components/ui/account-list/index.scss

@@ -34,9 +34,9 @@
   }
 
   &__wrapper {
-    width: 92%;
     display: flex;
     overflow: hidden;
+    width: 100%;
   }
 
   &__list {

ui/components/ui/site-origin/index.scss

@@ -1,4 +1,10 @@
 .site-origin {
+  max-width: 100%;
+
+  .chip {
+    max-width: 100%;
+  }
+
   .chip__left-icon {
     padding: 4px 0 4px 8px;
   }

ui/pages/permissions-connect/choose-account/choose-account.js

@@ -49,28 +49,30 @@ const ChooseAccount = ({
 
   return (
     <>
-      <PermissionsConnectHeader
-        iconUrl={targetSubjectMetadata?.iconUrl}
-        iconName={targetSubjectMetadata?.name}
-        headerTitle={t('connectWithMetaMask')}
-        headerText={
-          accounts.length > 0
-            ? t('selectAccounts')
-            : t('connectAccountOrCreate')
-        }
-        siteOrigin={targetSubjectMetadata?.origin}
-      />
-      <AccountList
-        accounts={accounts}
-        selectNewAccountViaModal={selectNewAccountViaModal}
-        addressLastConnectedMap={addressLastConnectedMap}
-        nativeCurrency={nativeCurrency}
-        selectedAccounts={selectedAccounts}
-        allAreSelected={allAreSelected}
-        deselectAll={deselectAll}
-        selectAll={selectAll}
-        handleAccountClick={handleAccountClick}
-      />
+      <div className="permissions-connect-choose-account__content">
+        <PermissionsConnectHeader
+          iconUrl={targetSubjectMetadata?.iconUrl}
+          iconName={targetSubjectMetadata?.name}
+          headerTitle={t('connectWithMetaMask')}
+          headerText={
+            accounts.length > 0
+              ? t('selectAccounts')
+              : t('connectAccountOrCreate')
+          }
+          siteOrigin={targetSubjectMetadata?.origin}
+        />
+        <AccountList
+          accounts={accounts}
+          selectNewAccountViaModal={selectNewAccountViaModal}
+          addressLastConnectedMap={addressLastConnectedMap}
+          nativeCurrency={nativeCurrency}
+          selectedAccounts={selectedAccounts}
+          allAreSelected={allAreSelected}
+          deselectAll={deselectAll}
+          selectAll={selectAll}
+          handleAccountClick={handleAccountClick}
+        />
+      </div>
       <div className="permissions-connect-choose-account__footer-container">
         <PermissionsConnectFooter />
         <div className="permissions-connect-choose-account__bottom-buttons">

ui/pages/permissions-connect/choose-account/index.scss

@@ -7,6 +7,16 @@
     color: var(--Red-400);
   }
 
+  &__content {
+    display: flex;
+    overflow-y: auto;
+    flex-direction: column;
+    width: 100%;
+    padding-left: 24px;
+    padding-right: 24px;
+    margin-top: 2px;
+  }
+
   &__footer-container {
     width: 100%;
     flex: 1;
@@ -27,7 +37,7 @@
     width: 100%;
     padding-top: 16px;
     padding-bottom: 16px;
-    margin-top: 8px;
+    margin-top: 12px;
     border-top: 1px solid #d6d9dc;
 
     @media screen and (min-width: $break-large) {

ui/pages/permissions-connect/flask/snap-install/index.scss

@@ -24,5 +24,6 @@
 
   .page-container__footer {
     width: 100%;
+    margin-top: 12px;
   }
 }