Header update

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

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

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

@@ -12,6 +12,7 @@
   }
 
   font-size: 16px;
+  padding-left: 16px;
 
   a {
     @extend .link-offset-2;
@@ -32,6 +33,7 @@
   h6 {
     margin-top: 1.6em;
     margin-bottom: 0.8em;
+    margin-left: calc(-0.5em + -16px);
 
     &:first-child {
       margin-top: 0;
@@ -46,6 +48,8 @@
     margin-top: 2em;
     font-size: 1.9em;
     line-height: 1.1em;
+  }
+  h1 > span {
     border-bottom: 2px solid var(--bs-border-color);
   }
 
@@ -54,6 +58,8 @@
     font-size: 1.6em;
     font-weight: bold;
     line-height: 1.225;
+  }
+  h2 > span {
     border-bottom: 1px solid var(--bs-border-color);
   }
 
@@ -66,6 +72,8 @@
     font-size: 1.35em;
     font-weight: normal;
 
+  }
+  h4 > span {
     // style
     @include add-left-border(6px);
   }
@@ -74,6 +82,8 @@
     font-size: 1.25em;
     font-weight: normal;
 
+  }
+  h5 > span {
     // style
     @include add-left-border(4px);
   }
@@ -81,7 +91,8 @@
   h6 {
     font-size: 1.2em;
     font-weight: normal;
-
+   }
+   h6 > span {
     // style
     @include add-left-border(2px);
   }
@@ -284,6 +295,22 @@
   }
 }
 
+@include bs.media-breakpoint-down(md) {
+  .wiki {
+
+    padding-left: 0;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-left: 0;
+    }
+  }
+}
+
 @include bs.media-breakpoint-down(sm) {
   .main .wiki {
     img {