Fixed scroll-margin-top for sidenote-ref

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);

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;

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}]