ToC Fix

Author: utkarsh125

packages/ui-components/Containers/MetaBar/index.module.css

@@ -13,11 +13,12 @@
     [overflow-wrap:anywhere]
     lg:sticky
     lg:top-0
-    lg:h-max
-    lg:min-h-screen
+    lg:max-h-screen
     lg:px-6
     dark:border-neutral-900;
 
+  scrollbar-width: none;
+
   dl {
     @apply w-full;
   }
@@ -82,3 +83,17 @@
       dark:hidden;
   }
 }
+
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .wrapper {
+    max-height: calc(100vh - 4rem);
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    position: sticky;
+    top: 4rem;
+  }
+}

packages/ui-components/Containers/MetaBar/index.tsx

@@ -49,12 +49,12 @@ const MetaBar: FC<MetaBarProps> = ({
               <ol>
                 {filteredHeadings.map(head => (
                   <li
-                    key={head.value}
+                    key={head.data.id}
                     className={
                       head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
                     }
                   >
-                    <Component href={`#${head?.data?.id}`}>
+                    <Component href={`#${head.data.id}`}>
                       {' '}
                       {head.value}
                     </Component>