relocate toastr container

apps/app/src/components/Layout/BasicLayout.module.scss

@@ -0,0 +1,28 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '~/styles/mixins';
+
+
+// for react-toastify
+.grw-basic-layout :global {
+  .Toastify .Toastify__toast-container {
+    top: 2.5em;
+
+    @include bs.media-breakpoint-down(md) {
+      top: 6.5em;
+    }
+  }
+}
+
+.grw-basic-layout {
+  @include mixins.with-editing() {
+    .Toastify .Toastify__toast-container {
+      top: 5em;
+
+      @include bs.media-breakpoint-down(md) {
+        top: 7em;
+      }
+    }
+  }
+}
+
+

apps/app/src/components/Layout/BasicLayout.tsx

@@ -9,6 +9,12 @@ import { Sidebar } from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
 
+
+import styles from './BasicLayout.module.scss';
+
+const moduleClass = styles['grw-basic-layout'] ?? '';
+
+
 const AlertSiteUrlUndefined = dynamic(() => import('../AlertSiteUrlUndefined').then(mod => mod.AlertSiteUrlUndefined), { ssr: false });
 const DeleteAttachmentModal = dynamic(() => import('../PageAttachment/DeleteAttachmentModal').then(mod => mod.DeleteAttachmentModal), { ssr: false });
 const HotkeysManager = dynamic(() => import('../Hotkeys/HotkeysManager'), { ssr: false });
@@ -35,7 +41,7 @@ type Props = {
 
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
   return (
-    <RawLayout className={`${className ?? ''}`}>
+    <RawLayout className={`${moduleClass} ${className ?? ''}`}>
       <DndProvider backend={HTML5Backend}>
 
         <div className="page-wrapper flex-row">

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -9,7 +9,7 @@
   }
 }
 
-@include mixins.editing() {
+@include mixins.at-editing() {
   .grw-contextual-sub-navigation {
     position: fixed;
     right: 0;

apps/app/src/components/PageEditor/EditorNavbarBottom.module.scss

@@ -2,7 +2,7 @@
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
-@include mixins.editing() {
+@include mixins.at-editing() {
   .grw-editor-navbar-bottom :global {
     .grw-grant-selector {
       max-width: 250px;

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -25,7 +25,7 @@
 }
 
 // Hide when editing
-@include mixins.editing() {
+@include mixins.at-editing() {
   .btn-toggle-collapse {
     visibility: hidden;
   }

apps/app/src/styles/_editor.scss

@@ -95,15 +95,6 @@
 
   }
 
-  // .builtin-editor .tab-pane#edit
-
-  /*****************
-   *     Toastr
-   *****************/
-  .Toastify .Toastify__toast-container {
-    top: 4.5em;
-  }
-
 }
 
 // TODO: Never used this id class

apps/app/src/styles/mixins/_editing.scss

@@ -1,14 +1,38 @@
-@mixin editing($global: false) {
+/**
+ * USAGE:
+ * @include at-editing() {
+ *   .component-class {
+ *     visibility: hidden;
+ *   }
+ * }
+ *
+ * outputs: .layout-root.editing .component-class_LOCAL_ID { visibility: hidden; }
+ */
+@mixin at-editing() {
   :global {
     .layout-root.editing {
-      @if ($global) {
+      :local {
         @content;
       }
-      @else {
-        :local {
-          @content;
-        }
-      }
+    }
+  }
+}
+
+/**
+ * USAGE:
+ * .component-class {
+ *   @include with-editing() {
+ *     visibility: hidden;
+ *   }
+ * }
+ *
+ * outputs: .component-class_LOCAL_ID.layout-root.editing { visibility: hidden; }
+ */
+
+@mixin with-editing() {
+  &:global {
+    &.layout-root.editing {
+      @content;
     }
   }
 }