From ae6da529cf2ebaa880075cd52a8258bf34bd340e Mon Sep 17 00:00:00 2001
From: Dave <ottonom@gmail.com>
Date: Thu, 2 Oct 2025 14:33:27 +0200
Subject: [PATCH] Fixed scroll-margin-top for sidenote-ref

---
 .../Content/Sidenote/Container/Container.module.css       | 8 +++++---
 src/components/Content/Sidenote/Item/Item.module.css      | 1 +
 src/components/Content/Sidenote/Item/index.tsx            | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Content/Sidenote/Container/Container.module.css b/src/components/Content/Sidenote/Container/Container.module.css
index 8067b2b..a72b00e 100644
--- a/src/components/Content/Sidenote/Container/Container.module.css
+++ b/src/components/Content/Sidenote/Container/Container.module.css
@@ -11,13 +11,15 @@
 }
 
 .note {
+  @mixin text-xs;
+  @mixin my var(--spacing-cozy);
+
   position: relative;
-  min-width: 16rem;
+  padding-left: var(--size-12);
   font-family: var(--font-mono);
 
   @media screen and (--bp-margin) {
-    @mixin text-xs;
-
+    min-width: 16rem;
     margin-right: var(--spacing-generous);
     padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
     border: var(--size-1) solid var(--color-surface-inverse);
diff --git a/src/components/Content/Sidenote/Item/Item.module.css b/src/components/Content/Sidenote/Item/Item.module.css
index adbb11d..8c2bc1d 100644
--- a/src/components/Content/Sidenote/Item/Item.module.css
+++ b/src/components/Content/Sidenote/Item/Item.module.css
@@ -1,6 +1,7 @@
 .ref {
   @mixin px var(--spacing-tight);
 
+  scroll-margin-top: calc(var(--el-header-height) + var(--spacing-comfortable));
   display: inline-block;
   font-weight: var(--typo-weight-black);
   transition: color 0.5s ease-in-out;
diff --git a/src/components/Content/Sidenote/Item/index.tsx b/src/components/Content/Sidenote/Item/index.tsx
index 32f9421..6f6a952 100644
--- a/src/components/Content/Sidenote/Item/index.tsx
+++ b/src/components/Content/Sidenote/Item/index.tsx
@@ -7,7 +7,7 @@ export default function SidenoteItem({ id, marker, content, type }: Sidenote) {
       <a
         href={`#${id}`}
         className={styles.ref}
-        id={`#ref-${id}`}
+        id={`ref-${id}`}
         style={{ anchorName: `--note-${id}` } as React.CSSProperties}
       >
         [{marker}]