nextlink out from customtag

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

@@ -6,7 +6,7 @@
   .revision-head-link {
     margin-right: 0.5em;
     user-select: none;
-    opacity: 0;
+    opacity: 1;
   }
   .revision-head-edit-button{
     margin-left: 0.5em;

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

@@ -113,16 +113,18 @@ export const Header = (props: HeaderProps): JSX.Element => {
   const showEditButton = !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null;
 
   return (
-  <div className='d-flex flex-row'>
-    <NextLink href={`#${id}`} className={`d-none d-md-inline revision-head-link h${props.level}`}>
-      #
-    </NextLink>
-    <CustomTag id={id} className={`${styles['revision-head']} ${isActive ? styles.blink : ''} d-inline flex-fill`}>
-      {children}
-      {showEditButton && (
-        <EditLink line={node.position?.start.line} />
-      )}
-    </CustomTag>
-  </div>
+    <div className={`${styles['revision-head']} d-flex flex-row`}>
+      <NextLink href={`#${id}`} className={`d-none d-md-inline revision-head-link h${props.level}`}>
+        #
+      </NextLink>
+      <div className="d-inline flex-fill">
+        <CustomTag id={id} className={`${styles['revision-head']} ${isActive ? styles.blink : ''} `}>
+          {children}
+          {showEditButton && (
+            <EditLink line={node.position?.start.line} />
+          )}
+        </CustomTag>
+      </div>
+    </div>
   );
 };

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

@@ -29,7 +29,13 @@
   h3,
   h4,
   h5,
-  h6 {
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
     margin-top: 1.6em;
     margin-bottom: 0.8em;
 
@@ -41,49 +47,68 @@
   }
 
   /* stylelint-disable no-descending-specificity */
-  h1 {
+  h1, .h1 {
     padding: 0.3em 0;
     margin-top: 2em;
     font-size: 1.9em;
     line-height: 1.1em;
+  }
+
+  h1 {
     border-bottom: 2px solid var(--bs-border-color);
   }
 
-  h2 {
+  h2, .h2 {
+    padding-bottom: 0.3em;
     font-size: 1.6em;
     font-weight: bold;
     line-height: 1.225;
-    padding-bottom: 0.3em;
+  }
+  h2 {
     border-bottom: 1px solid var(--bs-border-color);
   }
 
-  h3 {
+  h3, .h3 {
     font-size: 1.4em;
     font-weight: bold;
   }
 
-  h4 {
+  h4, .h4 {
     font-size: 1.35em;
     font-weight: normal;
+  }
+  h4 {
     // style
     @include add-left-border(6px);
   }
 
-  h5 {
+  h5, .h5 {
     font-size: 1.25em;
     font-weight: normal;
+  }
+  h5 {
     // style
     @include add-left-border(4px);
   }
 
-  h6 {
+  h6, .h6 {
     font-size: 1.2em;
     font-weight: normal;
+  }
+  h6 {
     // style
     @include add-left-border(2px);
   }
   /* stylelint-enable no-descending-specificity */
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+  }
+
   p {
     margin: 15px 0;
     font-weight: normal;