fixed table of contents issues

src/components/markdown/TableOfContents.tsx

@@ -59,7 +59,19 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
     e.preventDefault();
     const element = document.getElementById(headingId);
     if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
+      // Calculate the scroll offset to account for fixed header
+      // Mobile: 80px, Desktop: 120px
+      const isMobile = window.innerWidth < 768;
+      const scrollOffset = isMobile ? 80 : 120;
+      
+      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+      const targetPosition = elementPosition - scrollOffset;
+      
+      window.scrollTo({
+        top: targetPosition,
+        behavior: "smooth",
+      });
+      
       // Update URL without causing a page reload
       window.history.pushState(null, "", `#${headingId}`);
       // Close mobile menu after click
@@ -83,13 +95,14 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
       <nav
         aria-label="Tabela de conteúdos"
         className={`
-          md:sticky md:top-4 md:max-h-[80vh] md:overflow-auto md:block
+          md:sticky md:max-h-[calc(100vh-140px)] md:overflow-auto md:block
           ${isOpen ? "block" : "hidden md:block"}
           mb-6 md:mb-0 p-4 md:p-0
           bg-white md:bg-transparent
           border md:border-none border-gray-200 md:border-0
           rounded-lg md:rounded-none
         `}
+        style={{ top: "120px" }}
       >
         <ul className="space-y-1">
           {headings.map((h) => (