fix(thecurve): fixes for scroll behaviour

Author: ncarazon

front_end/src/app/(thecurve)/components/curve_histogram/curve_histogram.tsx

@@ -41,7 +41,16 @@ const CurveHistogram: FC<Props> = ({
           x: [0, 100],
           y: [0, maxY],
         }}
-        containerComponent={<VictoryContainer responsive={true} />}
+        containerComponent={
+          <VictoryContainer
+            responsive={true}
+            style={{
+              pointerEvents: "auto",
+              userSelect: "auto",
+              touchAction: "auto",
+            }}
+          />
+        }
         padding={{ top: 0, bottom: 25, left: 10, right: 10 }}
         height={height}
       >

front_end/src/app/(thecurve)/components/curve_histogram/curve_histogram_drawer.tsx

@@ -22,6 +22,7 @@ const CurveHistogramDrawer: FC<Props> = ({ postId, onNextQuestion }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [post, setPost] = useState<PostWithForecasts | null>(null);
   const chartContainerRef = useRef<HTMLDivElement>(null);
+  const nextBtnRef = useRef<HTMLButtonElement>(null);
   const [chartHeight, setChartHeight] = useState(65);
 
   useEffect(() => {
@@ -40,6 +41,13 @@ const CurveHistogramDrawer: FC<Props> = ({ postId, onNextQuestion }) => {
   useEffect(() => {
     if (!chartContainerRef.current) return;
     setChartHeight(Math.max(chartContainerRef.current?.clientHeight, 65));
+
+    setTimeout(() => {
+      nextBtnRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }, 100);
   }, [isLoading]);
 
   if (isLoading) {
@@ -93,6 +101,7 @@ const CurveHistogramDrawer: FC<Props> = ({ postId, onNextQuestion }) => {
         </div>
         <div className="mt-4 flex w-full justify-center">
           <Button
+            ref={nextBtnRef}
             className="!bg-blue-900 !px-5 !text-lg !text-gray-200"
             onClick={() => {
               onNextQuestion && onNextQuestion();

front_end/src/app/(thecurve)/components/curve_survey.tsx

@@ -20,6 +20,7 @@ const Survey: FC<Props> = ({ questions }) => {
 
   const nextQuestion = useCallback(
     (questionIndex: number) => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
       questions.length === questionIndex + 1
         ? router.push("/thecurve")
         : setQuestionIndex((prev) => (prev ?? 0) + 1);