diff --git a/common/components/Header/components/CustomNodeModal.tsx b/common/components/Header/components/CustomNodeModal.tsx index b5edf435..1160a756 100644 --- a/common/components/Header/components/CustomNodeModal.tsx +++ b/common/components/Header/components/CustomNodeModal.tsx @@ -95,6 +95,7 @@ class CustomNodeModal extends React.Component { isOpen={true} buttons={buttons} handleClose={handleClose} + maxWidth={580} >
{isHttps &&
{translate('NODE_Warning')}
} diff --git a/common/components/ui/Modal.scss b/common/components/ui/Modal.scss index d3892aad..fa036cae 100644 --- a/common/components/ui/Modal.scss +++ b/common/components/ui/Modal.scss @@ -111,7 +111,7 @@ $m-anim-speed: 400ms; // Mobile styles @media(max-width: $screen-sm) { - width: calc(100% - 40px); + width: calc(100% - 40px) !important; } } diff --git a/common/components/ui/Modal.tsx b/common/components/ui/Modal.tsx index fd3608f6..dbe3ca5b 100644 --- a/common/components/ui/Modal.tsx +++ b/common/components/ui/Modal.tsx @@ -15,8 +15,13 @@ interface Props { disableButtons?: boolean; children: any; buttons?: IButton[]; + maxWidth?: number; handleClose?(): void; } +interface ModalStyle { + width?: string; + maxWidth?: string; +} const Fade = ({ children, ...props }) => ( @@ -46,16 +51,22 @@ export default class Modal extends PureComponent { } public render() { - const { isOpen, title, children, buttons, handleClose } = this.props; + const { isOpen, title, children, buttons, handleClose, maxWidth } = this.props; const hasButtons = buttons && buttons.length; + const modalStyle: ModalStyle = {}; + + if (maxWidth) { + modalStyle.width = '100%'; + modalStyle.maxWidth = `${maxWidth}px`; + } return ( {isOpen && (
-
-
+
+
{title && (

{title}