Allow modals to specify max width

common/components/Header/components/CustomNodeModal.tsx

@@ -95,6 +95,7 @@ class CustomNodeModal extends React.Component<Props, State> {
         isOpen={true}
         buttons={buttons}
         handleClose={handleClose}
+        maxWidth={580}
       >
         <div>
           {isHttps && <div className="alert alert-warning small">{translate('NODE_Warning')}</div>}

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;
   }
 }
 

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 }) => (
   <CSSTransition {...props} timeout={300} classNames="animate-modal">
@@ -46,16 +51,22 @@ export default class Modal extends PureComponent<Props, {}> {
   }
 
   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 (
       <TransitionGroup>
         {isOpen && (
           <Fade>
             <div>
-              <div className={`Modalshade`} />
-              <div className={`Modal`}>
+              <div className="Modalshade" />
+              <div className="Modal" style={modalStyle}>
                 {title && (
                   <div className="Modal-header flex-wrapper">
                     <h2 className="Modal-header-title">{title}</h2>