fix: Allow ToC to scroll independently of page content (#7754)

* ToC Fix

* Fix: replaced raw css with tailwind

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

* Replaced display:none with @apply hidden

* Fix: not all elements were being rendered

* Removed the redundant scrollbar styles

* fix: metabar no longer has a short length

* fix: metabar length fix

* fix: chromatic diff

* fix: removed the added padding

* fix: removed the additional p-4

* added global variable for height

Author: utkarsh125

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

@@ -6,20 +6,26 @@
     flex-col
     items-start
     gap-8
-    overflow-y-auto
     border-neutral-200
     px-4
     py-6
     [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;
 
   dl {
-    @apply w-full;
+    @apply flex
+      w-full
+      flex-col
+      gap-1.5
+      pb-12
+      [scrollbar-width:none]
+      lg:max-h-[calc(100vh-var(--header-height))]
+      lg:overflow-y-auto
+      [&::-webkit-scrollbar]:hidden;
   }
 
   dt {
@@ -55,6 +61,7 @@
 
     ol {
       @apply flex
+        w-full
         list-none
         flex-col
         gap-1.5

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,