From e05c693279b13528a18c64105f0c744912c4bba5 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 15 Nov 2021 16:49:14 -0330
Subject: [PATCH] Adding scroll bar to handle overflow of long network lists
 (#12706)

* Adding scroll bar to handle overflow of long network lists

* set scroll property to auto

* Add margin below scrollable network list
---
 .../app/dropdowns/network-dropdown.js         | 27 ++++++++++---------
 ui/css/itcss/components/network.scss          |  6 +++++
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js
index 4dd785874..7838a9864 100644
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@@ -338,20 +338,23 @@ class NetworkDropdown extends Component {
             </div>
           ) : null}
         </div>
-        {this.renderNetworkEntry('mainnet')}
 
-        {this.renderCustomRpcList(rpcListDetail, this.props.provider)}
+        <div className="network-dropdown-list">
+          {this.renderNetworkEntry('mainnet')}
 
-        <div
-          className={classnames('network-dropdown-testnets', {
-            'network-dropdown-testnets--no-visibility': !shouldShowTestNetworks,
-          })}
-        >
-          {this.renderNetworkEntry('ropsten')}
-          {this.renderNetworkEntry('kovan')}
-          {this.renderNetworkEntry('rinkeby')}
-          {this.renderNetworkEntry('goerli')}
-          {this.renderNetworkEntry('localhost')}
+          {this.renderCustomRpcList(rpcListDetail, this.props.provider)}
+
+          <div
+            className={classnames('network-dropdown-testnets', {
+              'network-dropdown-testnets--no-visibility': !shouldShowTestNetworks,
+            })}
+          >
+            {this.renderNetworkEntry('ropsten')}
+            {this.renderNetworkEntry('kovan')}
+            {this.renderNetworkEntry('rinkeby')}
+            {this.renderNetworkEntry('goerli')}
+            {this.renderNetworkEntry('localhost')}
+          </div>
         </div>
 
         {this.renderAddCustomButton()}
diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss
index f7355fc1b..8772f1c38 100644
--- a/ui/css/itcss/components/network.scss
+++ b/ui/css/itcss/components/network.scss
@@ -128,6 +128,12 @@
   width: 100%;
 }
 
+.network-dropdown-list {
+  max-height: 330px;
+  overflow-y: auto;
+  margin-bottom: 8px;
+}
+
 .network-dropdown-divider {
   width: 100%;
   height: 1px;