fix: scroll into view margin css

src/application/dto/article/utils/parseHeadings/parseHeadings.tsx

@@ -1,8 +1,6 @@
-import { Link as LinkIcon } from "@assets/images/svg-components/link";
 import { BLOCKS } from "@contentful/rich-text-types";
 import type { Block, Text } from "@contentful/rich-text-types";
 import { slugify } from "@modules/core/utils/slugify";
-import ReactDOMServer from "react-dom/server";
 
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
 
@@ -14,15 +12,13 @@ export function parseHeadings() {
 			BLOCKS[`HEADING_${level}` as keyof typeof BLOCKS],
 			(node: HeadingBlock) => {
 				const text = node.content.map((child: Text) => child.value).join("");
-				const linkIcon = ReactDOMServer.renderToStaticMarkup(<LinkIcon />);
 				const id = slugify(text);
 
 				return `
-					<h${level} id="${id}"class="article__heading flex flex-start align-baseline">
-						<a href="#${id}" onclick="window.location.hash='${id}'">
+					<h${level} id="${id}" class="article__heading flex flex-start align-baseline">
+						<a href="#${id}">
 							${text}
 						</a>
-						${linkIcon}
 					</h${level}>
 				`;
 			},

src/pages/articles/_article.css

@@ -28,6 +28,7 @@
 }
 
 .article__heading {
+	scroll-margin-block-start: var(--header-height);
 	gap: 0 0.5rem;
 
 	svg {