clean code

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -8,6 +8,7 @@
 
 .grw-page-path-nav-sticky :global {
   min-height: 75px;
+  margin-left: 1em;
 
   .sticky-inner-wrapper {
     z-index: bs.$zindex-sticky;

apps/app/src/components/ReactMarkdownComponents/Header.module.scss

@@ -4,15 +4,15 @@
   }
 
   .revision-head-link {
-    margin-right: 0.5em;
+    padding-right: 0.5em;
     user-select: none;
-    opacity: 1;
+    opacity: 0;
   }
   .revision-head-edit-button{
     margin-left: 0.5em;
     font-size: 16px;
     user-select: none;
-    opacity: 1;
+    opacity: 0;
     .material-symbols-outlined{
       vertical-align: middle;
     }

apps/app/src/components/ReactMarkdownComponents/Header.tsx

@@ -16,6 +16,7 @@ import styles from './Header.module.scss';
 
 
 const logger = loggerFactory('growi:components:Header');
+const moduleClass = styles['revision-head'] ?? '';
 
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
@@ -113,7 +114,7 @@ export const Header = (props: HeaderProps): JSX.Element => {
   const showEditButton = !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null;
 
   return (
-    <div className={`${styles['revision-head']} d-flex flex-row`}>
+    <div className={`${moduleClass} d-flex flex-row`}>
       <NextLink href={`#${id}`} className={`d-none d-md-inline revision-head-link h${props.level}`}>
         #
       </NextLink>

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

@@ -49,6 +49,12 @@
   }
 
   /* stylelint-disable no-descending-specificity */
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+    @include bs.media-breakpoint-up(md) {
+      margin-left: -1em;
+    }
+  }
+
   h1, .h1 {
     padding: 0.3em 0;
     margin-top: 2em;
@@ -231,7 +237,6 @@
     h6 {
       margin-top: 1.6em * $ratio;
       margin-bottom: 0.8em * $ratio;
-
       &:first-child {
         margin-top: 15px;
       }