create page module scss

packages/app/src/components/Page.module.scss

@@ -0,0 +1,15 @@
+// mobile
+.page-mobile :global {
+  .wiki .revision-head {
+    .revision-head-link,
+    .revision-head-edit-button {
+      opacity: 0.3;
+    }
+  }
+
+  .editable-with-handsontable {
+    .handsontable-modal-trigger {
+      opacity: 0.3;
+    }
+  }
+}

packages/app/src/components/Page.tsx

@@ -31,6 +31,8 @@ import RevisionRenderer from './Page/RevisionRenderer';
 import mdu from './PageEditor/MarkdownDrawioUtil';
 import mtu from './PageEditor/MarkdownTableUtil';
 
+import styles from './Page.module.scss';
+
 
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
@@ -203,7 +205,7 @@ export const Page = (props) => {
   const { _id: revisionId, body: markdown } = currentPage.revision;
 
   return (
-    <div className={`mb-5 ${isMobile ? 'page-mobile' : ''}`}>
+    <div className={`mb-5 ${isMobile ? `page-mobile ${styles['page-mobile']}` : ''}`}>
 
       { revisionId != null && (
         <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} />

packages/app/src/styles/organisms/_wiki.scss

@@ -235,21 +235,6 @@
   }
 }
 
-// mobile
-.page-mobile .wiki .revision-head {
-
-  .revision-head-link,
-  .revision-head-edit-button {
-    opacity: 0.3;
-  }
-}
-
-.page-mobile .editable-with-handsontable {
-  .handsontable-modal-trigger {
-    opacity: 0.3;
-  }
-}
-
 @include bs.media-breakpoint-down(sm) {
   .main .wiki {
     img {