Adjust scroll buttons

Author: haglobah

pollen.rkt

@@ -48,17 +48,27 @@
         ,@body)))
 
 (define (meetups . body)
-  `(div ([class "scroll-container mb-4 -mx-6 md:-mx-12 lg:-mx-24 md:gap-4 lg:gap-8"])
+  `(div ([class "scroll-container mb-4 -mx-6 md:-mx-12 lg:-mx-24 md:gap-4 lg:gap-8 relative"])
     (div ([class "flex justify-between"])
-      (button ([id "meetups-scroll-left"] [class "text-zinc-500 hover:cursor-pointer hover:scale-125 duration-200 ease-out transition"])
+      (button ([id "meetups-scroll-left"] [class "
+              sticky -mr-6 sm:-mr-2 md:mr-0 left-0 top-0 transform 
+        text-zinc-500 bg-gradient-to-r from-white sm:bg-white h-screen sm:h-auto 
+        hover:cursor-pointer hover:scale-125 
+        duration-200 ease-out transition 
+        z-10"])
         (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1.5"] [stroke "currentColor"] [class "size-10"])
             (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "M15.75 19.5 8.25 12l7.5-7.5"]))
         )
       )
       (div ([id "meetups-container"] [class "relative flex items-center flex-grow snap-x overflow-x-auto"])
         ,@body
       )
-      (button ([id "meetups-scroll-right"] [class "text-zinc-500 hover:cursor-pointer hover:scale-125 duration-200 ease-out transition"]) 
+      (button ([id "meetups-scroll-right"] [class "
+              sticky -ml-6 sm:-ml-2 md:ml-0 right-0 top-0 transform  
+        text-zinc-500 bg-gradient-to-l from-white sm:bg-white h-screen sm:h-auto 
+        hover:cursor-pointer hover:scale-125 
+        duration-200 ease-out transition 
+        z-10"]) 
         (svg ([xmlns "http://www.w3.org/2000/svg"] [fill "none"] [viewBox "0 0 24 24"] [stroke-width "1.5"] [stroke "currentColor"] [class "size-10"])
             (path ([stroke-linecap "round"] [stroke-linejoin "round"] [d "m8.25 4.5 7.5 7.5-7.5 7.5"]))
         )