160341-182636-design-fb-response

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

@@ -3,8 +3,6 @@
 
 .decorationTab {
   min-width: map.get(bs.$grid-breakpoints, 'sm');
-  max-height: 80vh;
-  overflow-y: auto;
 }
 
 // Override the margin of callout in the preview

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

@@ -3,7 +3,6 @@
 
 .layoutTabContainer {
   min-width: map.get(bs.$grid-breakpoints, 'sm');
-  max-height: 80vh;
 }
 
 .checkboxMock {

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

@@ -1,10 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use 'sass:map';
 
-.textStyleTab {
-  max-height: 80vh;
-}
-
 .codeBlockWrapper {
   width: fit-content;
 }

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

@@ -201,7 +201,7 @@ export const TextStyleTab: React.FC = () => {
     },
   ];
   return (
-    <div className={`px-4 py-2 overflow-y-auto ${styles.textStyleTab}`}>
+    <div className="px-4 py-2">
       {TEXT_STYLE_GUIDES.map((item) => (
         <GuideRow
           key={item.id}

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EditorGuideButton.tsx

@@ -1,22 +1,31 @@
-import { type JSX, useCallback } from 'react';
+import { type JSX, useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
 
 import { useEditorGuideModalActions } from '../../../../states/modal/editor-guide';
 
 export const EditorGuideButton = (): JSX.Element => {
   const { open: openEditorGuideModal } = useEditorGuideModalActions();
+  const id = useId();
+  const { t } = useTranslation('translation');
 
   const onClickEditorGuideButton = useCallback(() => {
     openEditorGuideModal();
   }, [openEditorGuideModal]);
 
   return (
-    <button
-      type="button"
-      className="btn btn-toolbar-button d-none d-lg-block"
-      onClick={onClickEditorGuideButton}
-      aria-label="Open Editor Guide"
-    >
-      <span className="growi-custom-icons fs-6">editor_guide</span>
-    </button>
+    <div className="d-none d-lg-block">
+      <button
+        id={id}
+        type="button"
+        className="btn btn-toolbar-button"
+        onClick={onClickEditorGuideButton}
+      >
+        <span className="growi-custom-icons fs-6">editor_guide</span>
+      </button>
+      <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
+        {t('toolbar.editor_guide')}
+      </UncontrolledTooltip>
+    </div>
   );
 };