fix(style): incorrect header anchor icon position with multline headers (#2694)

Co-authored-by: Divyansh Singh <[email protected]>

Author: zonemeen

src/client/theme-default/components/VPBadge.vue

@@ -30,7 +30,7 @@ h3 .VPBadge,
 h4 .VPBadge,
 h5 .VPBadge,
 h6 .VPBadge {
-  vertical-align: top;
+  vertical-align: text-top;
 }
 
 h2 .VPBadge {

src/client/theme-default/styles/components/vp-doc.css

@@ -36,9 +36,10 @@
 }
 
 .vp-doc .header-anchor {
-  float: left;
+  position: absolute;
+  top: 0;
+  left: 0;
   margin-left: -0.87em;
-  padding-right: 0.23em;
   font-weight: 500;
   user-select: none;
   opacity: 0;
@@ -74,6 +75,10 @@
   }
 }
 
+.vp-doc h2 .header-anchor {
+  top: 24px;
+}
+
 /**
  * Paragraph and inline elements
  * -------------------------------------------------------------------------- */