160341-180922 use bootstrap class

apps/app/src/client/components/PageEditor/EditorGuideModal/EditorGuideModal.tsx

@@ -20,6 +20,11 @@ import { TextStyleTab } from './contents/TextStyleTab';
 
 import styles from './EditorGuideModal.module.scss';
 
+// Bootstrap $spacer (1rem = 16px) * 2 — matches calc(100% - 32px) padding on both sides
+const MODAL_MARGIN_PX = 32;
+// Bootstrap $modal-lg
+const MODAL_MAX_WIDTH = '800px';
+
 const TAB_TYPES = ['textstyle', 'layout', 'decoration'] as const;
 type TabType = (typeof TAB_TYPES)[number];
 type Props = {
@@ -93,11 +98,15 @@ export const EditorGuideModal = ({
       modalClassName={styles['editor-guide-modal']}
       backdropClassName={styles['editor-guide-backdrop']}
       contentClassName="bg-transparent border-0 shadow-none"
-      style={{ margin: 0, maxWidth: '700px', width: 'calc(100% - 32px)' }}
+      style={{
+        margin: 0,
+        maxWidth: MODAL_MAX_WIDTH,
+        width: `calc(100% - ${MODAL_MARGIN_PX}px)`,
+      }}
     >
       <Card
         className="shadow-lg border-0"
-        style={{ maxHeight: rect.height - 32 }}
+        style={{ maxHeight: rect.height - MODAL_MARGIN_PX }}
       >
         <CardHeader className="d-flex justify-content-between align-items-center bg-transparent border-bottom-0 pt-3">
           <h5 className="mb-0 text-body">{t('editor_guide.title')}</h5>

apps/app/src/client/components/PageEditor/EditorGuideModal/components/GuideRow.module.scss

@@ -1,3 +1,6 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use 'sass:map';
+
 .copyButton {
   display: block;
   padding: 0;
@@ -14,12 +17,12 @@
 
 .codePre {
   margin: 0;
-  line-height: 1.5;
+  line-height: bs.$line-height-base;
   white-space: pre;
 }
 
 .copyBadge {
-  top: 4px;
-  right: 4px;
-  font-size: 0.4rem;
+  top: map.get(bs.$spacers, 1);
+  right: map.get(bs.$spacers, 1);
+  font-size: bs.$badge-font-size;
 }

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/DecorationTab.module.scss

@@ -1,11 +1,14 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use 'sass:map';
+
 .decorationTab {
-  min-width: 560px;
+  min-width: map.get(bs.$grid-breakpoints, 'sm');
   max-height: 80vh;
   overflow-y: auto;
 }
 
 .dropdownMenu {
   max-height: 300px;
-  margin-top: 0.125rem;
+  margin-top: bs.$dropdown-spacer;
   overflow-y: auto;
 }

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/LayoutTab.module.scss

@@ -1,16 +1,19 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use 'sass:map';
+
 .layoutTabContainer {
-  min-width: 650px;
+  min-width: map.get(bs.$grid-breakpoints, 'sm');
   max-height: 80vh;
 }
 
 .checkboxMock {
-  width: 18px;
-  height: 18px;
+  width: bs.$form-check-input-width;
+  height: bs.$form-check-input-width;
 }
 
 .tableContainer {
   width: fit-content;
   table {
-    min-width: 580px;
+    min-width: map.get(bs.$grid-breakpoints, 'sm');
   }
 }

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.module.scss

@@ -1,3 +1,6 @@
+@use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use 'sass:map';
+
 .textStyleTab {
   max-height: 80vh;
 }
@@ -8,18 +11,18 @@
 }
 
 .codeContent {
-  font-size: 14px;
+  font-size: bs.$font-size-sm;
   color: rgba(var(--bs-white-rgb), 0.5);
 }
 
 .copyBadge {
-  top: 2px;
-  right: 4px;
-  font-size: 0.4rem;
+  top: bs.$dropdown-spacer;
+  right: map.get(bs.$spacers, 1);
+  font-size: bs.$badge-font-size;
 }
 
 .wikiPreview {
-  font-size: 14px;
+  font-size: bs.$font-size-sm;
 }
 
 .inlineCodeLabel {

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.tsx

@@ -36,7 +36,7 @@ const GuideRow = ({
           className="flex-shrink-0 border-0 p-0 bg-transparent text-start"
         >
           <div
-            className={`p-2 ps-2 pe-4 rounded position-relative ${styles.codeBlockWrapper}`}
+            className={`p-2 ps-2 pe-5 rounded position-relative ${styles.codeBlockWrapper}`}
           >
             <pre
               className={`m-0 small font-monospace fw-normal ${styles.codeContent}`}