кнопки вверх и вниз для страницы вопросов

src/pages/Questions/BranchingPanel/index.tsx

@@ -1,13 +1,16 @@
-import { Box, Typography, Switch, useTheme } from "@mui/material";
+import {Box, Typography, Switch, useTheme, Button, useMediaQuery} from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
 import { updateOpenBranchingPanel } from "@root/questions/actions";
 import {useQuestionsStore} from "@root/questions/store";
+import {useRef} from "react";
 
 
 export const BranchingPanel = () => {
   const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(660));
     const {openBranchingPanel} = useQuestionsStore.getState()
+  const ref = useRef()
   return (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
       <Box
@@ -71,13 +74,28 @@ export const BranchingPanel = () => {
           }}
         />
         <Box>
-          <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
             Логика ветвления
           </Typography>
           <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
             Настройте связи между вопросами
           </Typography>
         </Box>
+        <Button
+            onClick={() => {
+              ref.current?.scrollIntoView({
+                    behavior: 'smooth'
+                  }
+              )}}
+            sx={{
+              display: isMobile ? "flex" : "none",
+              position: "fixed",
+              right: isMobile ? "60px" : "400px",
+              top: "156px",
+            }}
+        >
+          вниз
+        </Button>
       </Box>
       { openBranchingPanel === true && <QuestionsList /> }
     </Box>

src/pages/Questions/ButtonsOptions.tsx

@@ -56,8 +56,7 @@ const {openBranchingPanel} = useQuestionsStore.getState()
             return enqueueSnackbar("У корня нет условий ветвления")
         }
         if (parentId.length !== 0) {
-            updateOpenBranchingPanel(!value)
-            openedModal()
+            updateOpenBranchingPanel(value)
         }
 
     }

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -65,8 +65,7 @@ export default function ButtonsOptionsAndPict({
             return enqueueSnackbar("У корня нет условий ветвления")
         }
         if (parentId.length !== 0) {
-            updateOpenBranchingPanel(!value)
-            updateOpenedModalSettingsId(question.id)
+            updateOpenBranchingPanel(value)
         }
 
     }

src/pages/Questions/QuestionsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useLayoutEffect } from "react"
+import { useState, useEffect, useLayoutEffect, useRef } from "react"
 import {
     Box,
     Button,
@@ -30,12 +30,14 @@ export default function QuestionsPage() {
         updateOpenBranchingPanel(true)
     },[])
 
+    const ref = useRef()
     if (!quiz) return null;
 
 
     return (
         <>
             <Box
+                ref={ref}
                 sx={{
                     maxWidth: "796px",
                     width: "100%",
@@ -81,6 +83,22 @@ export default function QuestionsPage() {
                 >
                     <AddPlus />
                 </IconButton>
+
+                <Button
+                    onClick={() => {
+                        ref.current?.scrollIntoView({
+                            behavior: 'smooth'
+                           }
+                        )}}
+                    sx={{
+                        display: isMobile ? "none" : "block",
+                        position: "fixed",
+                        right: isMobile ? "60px" : "400px",
+                        bottom: "75px",
+                    }}
+                >
+                    вверх
+                </Button>
                 <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
                     <Button
                         variant="outlined"
@@ -109,4 +127,4 @@ export default function QuestionsPage() {
             {openedModalSettingsId !== null && <BranchingQuestions/>}
         </>
     );
-}
+}