bubble buttons mobile update scrolling

packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss

@@ -11,7 +11,18 @@
     top: 50%;
     right: 0px;
     transform: translateY(-50%);
-    color: rgba($white, 0.2);
+    color: rgba($white, 0.3);
+    pointer-events: none;
+    transition: all 0.4s;
+  }
+
+  .scroll-indicator-left {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 0px;
+    transform: translateY(-50%);
+    color: rgba($white, 0.3);
     pointer-events: none;
     transition: all 0.4s;
   }
@@ -22,16 +33,32 @@
     top: 0;
     right: 0;
     bottom: 0;
-    width: 80px;
+    width: 60px;
     background: linear-gradient(to right, rgba($panel, 0), $panel);
     pointer-events: none;
     display: none;
     transition: all 0.4s;
   }
 
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 60px;
+    background: linear-gradient(to left, rgba($panel, 0), $panel);
+    pointer-events: none;
+    display: none;
+    transition: all 0.4s;
+  }
+
   &.show-gradient:after {
     display: block;
-    transition: all 0.4s;
+  }
+
+  &.show-left-gradient:before {
+    display: block;
   }
 }
 

packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import "./SelectionBubbles.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/pro-solid-svg-icons";
 
 interface SelectionBubbleProps {
   options: string[];
@@ -17,6 +20,7 @@ export default function SelectionBubbles({
     options.length > 0 ? options[0] : null
   );
   const [showGradient, setShowGradient] = useState(true);
+  const [showLeftGradient, setShowLeftGradient] = useState(false);
   const bubblesRef = useRef<HTMLDivElement>(null);
 
   const handleSelect = (
@@ -38,8 +42,10 @@ export default function SelectionBubbles({
   const handleScroll = () => {
     if (bubblesRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = bubblesRef.current;
-      const isAtEnd = scrollWidth - Math.round(scrollLeft + clientWidth) <= 1; // Adjust tolerance as needed
+      const isAtEnd = scrollWidth - Math.round(scrollLeft + clientWidth) <= 1;
+      const isAtStart = scrollLeft <= 1; // Check if at the start
       setShowGradient(!isAtEnd);
+      setShowLeftGradient(!isAtStart);
     }
   };
 
@@ -60,18 +66,25 @@ export default function SelectionBubbles({
   useEffect(() => {
     if (bubblesRef.current) {
       bubblesRef.current.addEventListener("scroll", handleScroll);
+      handleScroll();
       return () =>
         // eslint-disable-next-line react-hooks/exhaustive-deps
         bubblesRef.current?.removeEventListener("scroll", handleScroll);
     }
-  }, []);
+  }, [options]);
 
   return (
     <div
       className={`selection-bubbles-wrapper ${
         showGradient ? "show-gradient" : ""
-      }`}
+      } ${showLeftGradient ? "show-left-gradient" : ""}`.trim()}
     >
+      {showLeftGradient && (
+        <FontAwesomeIcon
+          icon={faChevronLeft}
+          className="scroll-indicator-left fs-5"
+        />
+      )}
       <div className="selection-bubbles" ref={bubblesRef}>
         {options.map(option => (
           <button