update _on-edit.scss

packages/app/src/components/PageEditor/GridEditModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
@@ -10,6 +10,8 @@ import BootstrapGrid from '~/client/models/BootstrapGrid';
 
 import geu from './GridEditorUtil';
 
+import styles from './GridEditModal.module.scss';
+
 const resSizes = BootstrapGrid.ResponsiveSize;
 const resSizeObj = {
   [resSizes.XS_SIZE]: { displayText: 'grid_edit.smart_no' },
@@ -188,7 +190,7 @@ class GridEditModal extends React.Component {
   render() {
     const { t } = this.props;
     return (
-      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className="grw-grid-edit-modal">
+      <Modal isOpen={this.state.show} toggle={this.cancel} size="xl" className={`${styles['grw-grid-edit-modal']} grw-grid-edit-modal`}>
         <ModalHeader tag="h4" toggle={this.cancel} className="bg-primary text-light">
           {t('grid_edit.create_bootstrap_4_grid')}
         </ModalHeader>

packages/app/src/components/PageEditor/GridEditModal.module.scss

@@ -0,0 +1,43 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.grw-grid-edit-modal {
+  .desktop-preview,
+  .tablet-preview,
+  .mobile-preview {
+    .row {
+      height: 140px;
+      margin: 0px;
+    }
+  }
+  .desktop-preview {
+    .row {
+      div {
+        padding: 0px;
+      }
+    }
+  }
+
+  .tablet-preview {
+    .row {
+      div {
+        padding: 0px;
+      }
+    }
+  }
+
+  .mobile-preview {
+    width: 75%;
+    .row {
+      div {
+        padding: 0px;
+      }
+    }
+  }
+
+  .grid-division-menu {
+    width: 60vw;
+    @include bs.media-breakpoint-down(lg) {
+      width: 80vw;
+    }
+  }
+}

packages/app/src/styles/_on-edit.scss

@@ -4,7 +4,7 @@
 @import 'sidebar-wiki';
 @import 'editor-overlay';
 
-
+// global imported
 body.on-edit {
   overflow-y: hidden !important;
 
@@ -292,6 +292,8 @@ body.on-edit {
   }
 }
 
+// TODO: Check no generated .wiki under .page-editor-preview-body.
+// see: https://github.com/weseek/growi/commit/a981c4659525adfa800235601e44302a270370ee#
 body.on-edit {
   .wrapper:not(.growi-layout-fluid) .page-editor-preview-body {
     .wiki {
@@ -306,6 +308,7 @@ body.on-edit {
   }
 }
 
+// TODO: Never used this id class on master and nextjs branchs.
 #tag-edit-button-tooltip {
   .tooltip-inner {
     color: black;
@@ -317,49 +320,3 @@ body.on-edit {
     border-bottom: 5px solid $gray-300;
   }
 }
-
-/*
- Grid Edit Modal
-*/
-
-.grw-grid-edit-modal {
-  .desktop-preview,
-  .tablet-preview,
-  .mobile-preview {
-    .row {
-      height: 140px;
-      margin: 0px;
-    }
-  }
-  .desktop-preview {
-    .row {
-      div {
-        padding: 0px;
-      }
-    }
-  }
-
-  .tablet-preview {
-    .row {
-      div {
-        padding: 0px;
-      }
-    }
-  }
-
-  .mobile-preview {
-    width: 75%;
-    .row {
-      div {
-        padding: 0px;
-      }
-    }
-  }
-
-  .grid-division-menu {
-    width: 60vw;
-    @include media-breakpoint-down(lg) {
-      width: 80vw;
-    }
-  }
-}