Merge pull request #816 from prymitive/overview-modal-xl

chore(ui): use xl size for the overview modal

ui/src/Components/Modal/index.js

@@ -14,9 +14,13 @@ import {
 const Modal = observer(
   class Modal extends Component {
     static propTypes = {
+      size: PropTypes.oneOf(["lg", "xl"]),
       isOpen: PropTypes.bool.isRequired,
       children: PropTypes.node.isRequired
     };
+    static defaultProps = {
+      size: "lg"
+    };
 
     constructor(props) {
       super(props);
@@ -47,13 +51,13 @@ const Modal = observer(
     }
 
     render() {
-      const { isOpen, children, ...props } = this.props;
+      const { size, isOpen, children, ...props } = this.props;
 
       return ReactDOM.createPortal(
         <React.Fragment>
           <MountModal in={isOpen} unmountOnExit {...props}>
             <div ref={this.modalRef} className="modal d-block" role="dialog">
-              <div className="modal-dialog modal-lg" role="document">
+              <div className={`modal-dialog modal-${size}`} role="document">
                 <div className="modal-content">{children}</div>
               </div>
             </div>

ui/src/Components/OverviewModal/index.js

@@ -58,7 +58,7 @@ const OverviewModal = observer(
               </div>
             </Flash>
           </TooltipWrapper>
-          <Modal isOpen={this.toggle.show}>
+          <Modal size="xl" isOpen={this.toggle.show}>
             <React.Suspense
               fallback={
                 <h1 className="display-1 text-secondary p-5 m-auto">