Fix scrolling on sidebar

Author: amyy2

apps/site/layouts/layouts.module.css

@@ -10,11 +10,10 @@
 .articleLayout {
   @apply max-w-8xl
     sm:grid-areas-[sidebar_main,sidebar_footer]
-    lg:grid-areas-[sidebar_._metabar,sidebar_main_metabar,sidebar_footer_metabar]
+    lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
     mx-auto
     block
     w-full
-    overflow-auto
     sm:grid
     sm:grid-cols-[theme(spacing.52)_1fr]
     sm:grid-rows-[1fr]
@@ -24,36 +23,35 @@
     xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
-    @apply grid-in-[sidebar];
+    @apply grid-in-[sidebar]
+      lg:sticky
+      lg:top-0
+      lg:h-[100vh]
+      lg:overflow-y-auto;
   }
 
   > *:nth-child(2) {
     @apply contents
-      overflow-y-scroll
       sm:max-lg:block;
 
     > *:first-child {
       @apply grid-in-[main]
         sm:bg-gradient-subtle
         sm:dark:bg-gradient-subtle-dark
         xl:px-18
-        overflow-y-auto
-        overflow-x-hidden
         p-4
         motion-safe:scroll-smooth
         sm:bg-fixed
-        sm:p-12
-        lg:sticky
-        lg:bottom-[4rem]
-        lg:h-max
-        lg:min-h-[calc(100vh_-_4rem)];
+        sm:p-12;
     }
 
     > *:last-child {
       @apply grid-in-[metabar]
         mt-8
         border-t
         sm:mt-0
+        lg:sticky
+        lg:top-0
         lg:max-w-xs
         lg:border-l
         lg:border-t-0;
@@ -65,7 +63,6 @@
       sticky
       bottom-0
       flex
-      h-[4rem]
       w-full
       flex-col
       items-center