feat: scroll to feedback view on view change

- When the currentFeedbackView changes the component can render partially off screen
- Add ref and useEffect to scroll down when it changes and isn't the "banner" or "thanks"

editor.planx.uk/src/components/Feedback/index.tsx

@@ -13,14 +13,14 @@ import {
   getInternalFeedbackMetadata,
   insertFeedbackMutation,
 } from "lib/feedback";
+import { useStore } from "pages/FlowEditor/lib/store";
 import { BackButton } from "pages/Preview/Questions";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useRef,useState } from "react";
 import { usePrevious } from "react-use";
 import FeedbackOption from "ui/public/FeedbackOption";
+
 import FeedbackForm from "./FeedbackForm";
 import FeedbackPhaseBanner from "./FeedbackPhaseBanner";
-import { useStore } from "pages/FlowEditor/lib/store";
-
 
 const FeedbackWrapper = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
@@ -98,6 +98,17 @@ const Feedback: React.FC = () => {
     }
   }, [breadcrumbs]);
 
+  const feedbackComponentRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (currentFeedbackView !== "banner" && currentFeedbackView !== "thanks") {
+      feedbackComponentRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    }
+  }, [currentFeedbackView]);
+
   function handleFeedbackViewClick(event: ClickEvents) {
     switch (event) {
       case "close":
@@ -364,7 +375,11 @@ const Feedback: React.FC = () => {
     }
   }
 
-  return <Feedback />;
+  return (
+    <div ref={feedbackComponentRef}>
+      <Feedback />
+    </div>
+  );
 };
 
 export default Feedback;