use bootstrap's original way of changing modal size

src/client/js/components/Admin/UserGroup/UserGroupDeleteModal.jsx

@@ -163,7 +163,7 @@ class UserGroupDeleteModal extends React.Component {
     const { t } = this.props;
 
     return (
-      <Modal className="admin-user-group-delete-modal" isOpen={this.props.isShow} toggle={this.props.onHide}>
+      <Modal className="modal-md" isOpen={this.props.isShow} toggle={this.props.onHide}>
         <ModalHeader tag="h4" toggle={this.props.onHide} className="modal-header bg-danger">
           <i className="icon icon-fire"></i> {t('admin:user_group_management.delete_modal.header')}
         </ModalHeader>

src/client/styles/scss/_admin.scss

@@ -29,10 +29,6 @@
     }
   }
 
-  .admin-user-group-delete-modal {
-    max-width: 600px;
-  }
-
   .admin-setting-header {
     border-bottom: 1px solid #dee2e6;
   }

src/client/styles/scss/_create-page.scss

@@ -1,17 +1,4 @@
 .modal.create-page {
-  // more than tablet size
-  @include media-breakpoint-down(sm) {
-    .modal-dialog {
-      max-width: 100%;
-      margin: 10px;
-    }
-  }
-
-  .modal-dialog {
-    max-width: 750px;
-    box-sizing: border-box;
-  }
-
   .modal-body {
     //TODO remove legend
     legend {
@@ -33,7 +20,7 @@
         }
 
         // change layout by screen size
-        @include media-breakpoint-down(sm) {
+        @include media-breakpoint-down(md) {
           flex-direction: column;
           .create-page-button-container {
             margin-top: 10px;

src/server/views/modal/create_page.html

@@ -1,5 +1,5 @@
 <div class="modal create-page" id="create-page">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
       <div class="modal-header bg-primary">