Style touchups

ui/app/pages/settings/networks-tab/index.scss

@@ -2,7 +2,6 @@
   &__content {
     margin-top: 24px;
     display: flex;
-    flex-direction: row;
     height: 100%;
     max-width: 739px;
     justify-content: space-between;
@@ -11,6 +10,7 @@
       margin-top: 0;
       flex-direction: column;
       overflow-x: hidden;
+      align-items: center;
     }
   }
 
@@ -26,11 +26,12 @@
   }
 
   &__network-form {
-    max-width: 343px;
-    max-height: 465px;
     display: flex;
+    flex: 1 0 auto;
     flex-direction: column;
     justify-content: space-between;
+    max-width: 343px;
+    max-height: 465px;
 
     .page-container__footer {
       border-top: none;
@@ -108,6 +109,7 @@
     display: none;
 
     @media screen and (max-width: 575px) {
+      width: 100%;
       display: flex;
       padding-top: 23px;
       padding-bottom: 23px;
@@ -150,6 +152,10 @@
       &:hover {
         cursor: pointer;
       }
+
+      @media screen and (max-width: 575px) {
+        margin: 0 4px 0 10px;
+      }
     }
 
     @media screen and (max-width: 575px) {

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -226,10 +226,9 @@ export default class NetworksTab extends PureComponent {
     const {
       setNetworksTabAddMode,
       setSelectedSettingsRpcUrl,
-      networkIsSelected,
-      networksTabIsInAddMode,
       history,
       isFullScreen,
+      shouldRenderNetworkForm,
     } = this.props
 
     return (
@@ -237,7 +236,7 @@ export default class NetworksTab extends PureComponent {
         {isFullScreen && this.renderSubHeader()}
         <div className="networks-tab__content">
           {this.renderNetworksTabContent()}
-          {!networkIsSelected && !networksTabIsInAddMode
+          {!isFullScreen && !shouldRenderNetworkForm
             ? (
               <div className="networks-tab__add-network-button-wrapper">
                 <Button