diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss
index 455adb971..f0b66f62d 100644
--- a/ui/app/pages/settings/networks-tab/index.scss
+++ b/ui/app/pages/settings/networks-tab/index.scss
@@ -2,12 +2,15 @@
&__content {
margin-top: 24px;
display: flex;
+ flex-direction: row;
height: 100%;
max-width: 739px;
justify-content: space-between;
@media screen and (max-width: 575px) {
margin-top: 0;
+ flex-direction: column;
+ overflow-x: hidden;
}
}
@@ -78,20 +81,21 @@
&__network-form-row {
@media screen and (max-width: 575px) {
- display: flex;
- flex-direction: column;
width: 93%;
}
&--warning {
background-color: #fefae8;
border: 1px solid #ffd33d;
- width: 93%;
border-radius: 5px;
box-sizing: border-box;
padding: 12px;
margin: 12px 0;
font-size: 12px;
+
+ @media screen and (max-width: 575px) {
+ width: 93%;
+ }
}
}
@@ -121,7 +125,6 @@
@media screen and (max-width: 575px) {
max-width: 100vw;
width: 100vw;
- overflow-y: scroll;
}
}
@@ -130,7 +133,7 @@
@media screen and (max-width: 575px) {
display: flex;
- padding-top: 19px;
+ padding-top: 23px;
padding-bottom: 23px;
justify-content: center;
align-items: center;
diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
index f689c8ace..324c750b9 100644
--- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
@@ -30,6 +30,7 @@ export default class NetworkForm extends PureComponent {
blockExplorerUrl: PropTypes.string,
rpcPrefs: PropTypes.object,
rpcUrls: PropTypes.array,
+ isFullScreen: PropTypes.bool,
}
state = {
@@ -136,11 +137,12 @@ export default class NetworkForm extends PureComponent {
onCancel = () => {
const {
+ isFullScreen,
networksTabIsInAddMode,
onClear,
} = this.props
- if (networksTabIsInAddMode) {
+ if (networksTabIsInAddMode || !isFullScreen) {
onClear()
} else {
this.resetForm()
@@ -327,6 +329,7 @@ export default class NetworkForm extends PureComponent {
viewOnly,
isCurrentRpcTarget,
networksTabIsInAddMode,
+ isFullScreen,
} = this.props
const {
networkName,
@@ -337,6 +340,8 @@ export default class NetworkForm extends PureComponent {
errors,
} = this.state
+ const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
+
const isSubmitDisabled = (
viewOnly ||
this.stateIsUnchanged() ||
@@ -344,7 +349,18 @@ export default class NetworkForm extends PureComponent {
!chainId ||
Object.values(errors).some((x) => x)
)
- const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
+
+ // The secondary button is either the form cancel button, or a "back"
+ // button. It is never disabled in the popup, and sometimes disabled in
+ // the fullscreen UI.
+ const secondaryButtonDisabled = (
+ isFullScreen && (viewOnly || this.stateIsUnchanged())
+ )
+ const secondaryButtonMessageKey = (
+ !isFullScreen && viewOnly
+ ? 'back'
+ : 'cancel'
+ )
return (
@@ -397,9 +413,9 @@ export default class NetworkForm extends PureComponent {