From b42040be98955d28e7bad60b6eb58dd33ca89855 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Fri, 16 May 2025 23:25:56 +0530
Subject: [PATCH 01/12] ToC Fix

---
 .../Containers/MetaBar/index.module.css       | 19 +++++++++++++++++--
 .../Containers/MetaBar/index.tsx              |  4 ++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 6b404cd0185ec..5a2887586a440 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/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;
+  }
+}
diff --git a/packages/ui-components/Containers/MetaBar/index.tsx b/packages/ui-components/Containers/MetaBar/index.tsx
index ad1e4cf4eda78..8f7425b9466cc 100644
--- a/packages/ui-components/Containers/MetaBar/index.tsx
+++ b/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>

From 05de3668f4d5c42d877ca0988379d8428552d95e Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sat, 17 May 2025 03:26:43 +0530
Subject: [PATCH 02/12] Fix: replaced raw css with tailwind

---
 .../Containers/MetaBar/index.module.css            | 14 ++------------
 .../ui-components/Containers/MetaBar/index.tsx     |  2 +-
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 5a2887586a440..ab7bd4dc10167 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -12,8 +12,8 @@
     py-6
     [overflow-wrap:anywhere]
     lg:sticky
-    lg:top-0
-    lg:max-h-screen
+    lg:top-16
+    lg:max-h-[calc(100vh-4rem)]
     lg:px-6
     dark:border-neutral-900;
 
@@ -87,13 +87,3 @@
 .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;
-  }
-}
diff --git a/packages/ui-components/Containers/MetaBar/index.tsx b/packages/ui-components/Containers/MetaBar/index.tsx
index 8f7425b9466cc..2f7dc5c465893 100644
--- a/packages/ui-components/Containers/MetaBar/index.tsx
+++ b/packages/ui-components/Containers/MetaBar/index.tsx
@@ -49,7 +49,7 @@ const MetaBar: FC<MetaBarProps> = ({
               <ol>
                 {filteredHeadings.map(head => (
                   <li
-                    key={head.data.id}
+                    key={head?.data?.id}
                     className={
                       head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
                     }

From e752090853464ce7a9493b02eff9361ae61feae4 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sat, 17 May 2025 03:38:40 +0530
Subject: [PATCH 03/12] Restored
 packages/ui-components/Containers/MetaBar/index.tsx

---
 packages/ui-components/Containers/MetaBar/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.tsx b/packages/ui-components/Containers/MetaBar/index.tsx
index 2f7dc5c465893..ad1e4cf4eda78 100644
--- a/packages/ui-components/Containers/MetaBar/index.tsx
+++ b/packages/ui-components/Containers/MetaBar/index.tsx
@@ -49,12 +49,12 @@ const MetaBar: FC<MetaBarProps> = ({
               <ol>
                 {filteredHeadings.map(head => (
                   <li
-                    key={head?.data?.id}
+                    key={head.value}
                     className={
                       head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
                     }
                   >
-                    <Component href={`#${head.data.id}`}>
+                    <Component href={`#${head?.data?.id}`}>
                       {' '}
                       {head.value}
                     </Component>

From fc7ad610599d993a8aa4208d54dab0e2c07be163 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sat, 17 May 2025 03:54:58 +0530
Subject: [PATCH 04/12] Replaced display:none with @apply hidden

---
 packages/ui-components/Containers/MetaBar/index.module.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index ab7bd4dc10167..5d626475bc456 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -84,6 +84,4 @@
   }
 }
 
-.wrapper::-webkit-scrollbar {
-  display: none;
-}
+@apply hidden;

From 473b8a5245addf1cfdf0c23ec7a40906aac4e210 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sun, 18 May 2025 00:23:05 +0530
Subject: [PATCH 05/12] Fix: not all elements were being rendered

---
 .../ui-components/Containers/MetaBar/index.module.css    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 5d626475bc456..51985b0388cb5 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -10,6 +10,7 @@
     border-neutral-200
     px-4
     py-6
+    pb-12
     [overflow-wrap:anywhere]
     lg:sticky
     lg:top-16
@@ -56,6 +57,7 @@
 
     ol {
       @apply flex
+        w-full
         list-none
         flex-col
         gap-1.5
@@ -69,7 +71,8 @@
     }
 
     &:last-child {
-      @apply mb-0;
+      @apply mb-0
+        p-4;
     }
   }
 
@@ -85,3 +88,7 @@
 }
 
 @apply hidden;
+@apply scrollbar;
+@apply scrollbar-thin;
+@apply scrollbar-thumb-neutral-300;
+@apply dark:scrollbar-thumb-neutral-700;

From d0d0427d954158d4c70fccc1c27a27f2c12b89c5 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sun, 18 May 2025 00:31:58 +0530
Subject: [PATCH 06/12] Removed the redundant scrollbar styles

---
 packages/ui-components/Containers/MetaBar/index.module.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 51985b0388cb5..0b896e390b5ee 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -88,7 +88,3 @@
 }
 
 @apply hidden;
-@apply scrollbar;
-@apply scrollbar-thin;
-@apply scrollbar-thumb-neutral-300;
-@apply dark:scrollbar-thumb-neutral-700;

From 79a83a0df95bf1efdd1354f1d7713df3d59139f6 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sun, 18 May 2025 12:30:56 +0530
Subject: [PATCH 07/12] fix: metabar no longer has a short length

---
 packages/ui-components/Containers/MetaBar/index.module.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 0b896e390b5ee..3347db4026514 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -2,6 +2,7 @@
 
 .wrapper {
   @apply flex
+    h-screen
     w-full
     flex-col
     items-start
@@ -13,8 +14,9 @@
     pb-12
     [overflow-wrap:anywhere]
     lg:sticky
+    lg:bottom-0
     lg:top-16
-    lg:max-h-[calc(100vh-4rem)]
+    lg:overflow-y-auto
     lg:px-6
     dark:border-neutral-900;
 

From dd9a5070135119f8e53770f066001f3df1ee2595 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sun, 18 May 2025 14:59:02 +0530
Subject: [PATCH 08/12] fix: metabar length fix

---
 .../Containers/MetaBar/index.module.css       | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 3347db4026514..b87d2a6d08c67 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -2,28 +2,29 @@
 
 .wrapper {
   @apply flex
-    h-screen
     w-full
     flex-col
     items-start
     gap-8
-    overflow-y-auto
     border-neutral-200
     px-4
     py-6
-    pb-12
     [overflow-wrap:anywhere]
     lg:sticky
-    lg:bottom-0
     lg:top-16
-    lg:overflow-y-auto
     lg:px-6
     dark:border-neutral-900;
 
-  scrollbar-width: none;
-
   dl {
-    @apply w-full;
+    @apply flex
+      w-full
+      flex-col
+      gap-1.5
+      pb-12
+      [scrollbar-width:none]
+      lg:max-h-[calc(100vh-4rem)]
+      lg:overflow-y-auto
+      [&::-webkit-scrollbar]:hidden;
   }
 
   dt {
@@ -73,7 +74,7 @@
     }
 
     &:last-child {
-      @apply mb-0
+      @apply mb-8
         p-4;
     }
   }
@@ -88,5 +89,3 @@
       dark:hidden;
   }
 }
-
-@apply hidden;

From 22bd816897ba4d4f13ad462f1136ac998d788e80 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Sun, 18 May 2025 20:29:15 +0530
Subject: [PATCH 09/12] fix: chromatic diff

---
 packages/ui-components/Containers/MetaBar/index.module.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index b87d2a6d08c67..0a288ed2e4a89 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -11,7 +11,8 @@
     py-6
     [overflow-wrap:anywhere]
     lg:sticky
-    lg:top-16
+    lg:top-0
+    lg:max-h-screen
     lg:px-6
     dark:border-neutral-900;
 
@@ -22,7 +23,7 @@
       gap-1.5
       pb-12
       [scrollbar-width:none]
-      lg:max-h-[calc(100vh-4rem)]
+      lg:max-h-[calc(100vh-6rem)]
       lg:overflow-y-auto
       [&::-webkit-scrollbar]:hidden;
   }
@@ -74,7 +75,7 @@
     }
 
     &:last-child {
-      @apply mb-8
+      @apply mb-0
         p-4;
     }
   }

From cf6dfa183818a3c73fa19347a42e2f3c9c18a7e9 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Mon, 19 May 2025 02:28:06 +0530
Subject: [PATCH 10/12] fix: removed the added padding

---
 packages/ui-components/Containers/MetaBar/index.module.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 0a288ed2e4a89..552dacf1ff521 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -21,7 +21,6 @@
       w-full
       flex-col
       gap-1.5
-      pb-12
       [scrollbar-width:none]
       lg:max-h-[calc(100vh-6rem)]
       lg:overflow-y-auto
@@ -75,8 +74,7 @@
     }
 
     &:last-child {
-      @apply mb-0
-        p-4;
+      @apply mb-0;
     }
   }
 

From 1428437493845575ca7a94a34a82dd87b34a46e3 Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Mon, 19 May 2025 02:47:09 +0530
Subject: [PATCH 11/12] fix: removed the additional p-4

---
 packages/ui-components/Containers/MetaBar/index.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 552dacf1ff521..4462876c07333 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -21,6 +21,7 @@
       w-full
       flex-col
       gap-1.5
+      pb-12
       [scrollbar-width:none]
       lg:max-h-[calc(100vh-6rem)]
       lg:overflow-y-auto

From 6d782d167a5e0c26b245e213808b693bbdf336af Mon Sep 17 00:00:00 2001
From: Utkarsh Pandey <utk2665@gmail.com>
Date: Wed, 28 May 2025 14:06:24 +0530
Subject: [PATCH 12/12] added global variable for height

---
 packages/ui-components/Containers/MetaBar/index.module.css | 2 +-
 packages/ui-components/styles/index.css                    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/Containers/MetaBar/index.module.css b/packages/ui-components/Containers/MetaBar/index.module.css
index 4462876c07333..1a75f08a1ef44 100644
--- a/packages/ui-components/Containers/MetaBar/index.module.css
+++ b/packages/ui-components/Containers/MetaBar/index.module.css
@@ -23,7 +23,7 @@
       gap-1.5
       pb-12
       [scrollbar-width:none]
-      lg:max-h-[calc(100vh-6rem)]
+      lg:max-h-[calc(100vh-var(--header-height))]
       lg:overflow-y-auto
       [&::-webkit-scrollbar]:hidden;
   }
diff --git a/packages/ui-components/styles/index.css b/packages/ui-components/styles/index.css
index 4999c381e2b43..a5d636800e1ef 100644
--- a/packages/ui-components/styles/index.css
+++ b/packages/ui-components/styles/index.css
@@ -22,6 +22,10 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+  :root {
+    --header-height: calc(var(--spacing, 0.25rem) * 16);
+  }
+
   *,
   ::after,
   ::before,