кнопки логики ветвления исчезают и пропадают там где нужно

src/pages/Questions/QuestionSwitchWindowTool.tsx

@@ -13,11 +13,13 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 
 export const QuestionSwitchWindowTool = ({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) => {
   const { questions } = useQuestionsStore.getState();
   const theme = useTheme();
@@ -54,6 +56,7 @@ export const QuestionSwitchWindowTool = ({
         <SwitchBranchingPanel
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={openBranchingPageHC}
+          widthMain={widthMain}
         />
       )}
     </Box>

src/pages/Questions/QuestionsPage.tsx

@@ -32,11 +32,13 @@ import { useNavigate } from "react-router-dom";
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 
 export default function QuestionsPage({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) {
   const theme = useTheme();
   const { openedModalSettingsId } = useUiTools();
@@ -86,6 +88,7 @@ export default function QuestionsPage({
       <QuestionSwitchWindowTool
         openBranchingPage={openBranchingPage}
         setOpenBranchingPage={setOpenBranchingPage}
+        widthMain={widthMain}
       />
       <Box
         sx={{

src/pages/Questions/SwitchBranchingPanel/index.tsx

@@ -12,19 +12,20 @@ import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuesti
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: () => void;
+  widthMain: number;
 }
 
 export const SwitchBranchingPanel = ({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const isTablet = useMediaQuery(theme.breakpoints.down(1446));
-
   return openBranchingPage ? (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
-      {isTablet || (
+      {widthMain > 1216 && (
         <PanelSwitchQuestionListGraph
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={setOpenBranchingPage}

src/pages/main.tsx

@@ -3,7 +3,7 @@ import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Box from "@mui/material/Box";
 import { useTheme, useMediaQuery, IconButton } from "@mui/material";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { SidebarMobile } from "../ui_kit/Sidebar/SidebarMobile";
 import { setShowConfirmLeaveModal } from "@root/uiTools/actions";
 import { setCurrentStep, setQuizes } from "@root/quizes/actions";
@@ -65,7 +65,8 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
 
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
-  const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
+  const isBranchingLogicSmall = useMediaQuery(theme.breakpoints.down(1100));
+  const isBranchingLogicBig = useMediaQuery(theme.breakpoints.down(1446));
   const isLinkButton = useMediaQuery(theme.breakpoints.down(708));
   const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
   const [nextStep, setNextStep] = useState<number>(0);
@@ -94,6 +95,21 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
     setCurrentStep(index);
   };
 
+  const [widthMain, setWidthMain] = useState(null);
+  const mainBlock = useRef(0);
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      const { width } = entries[0].contentRect;
+      setWidthMain(width);
+    }),
+  );
+
+  useEffect(() => {
+    observer.current.observe(mainBlock.current);
+  }, [mainBlock, observer]);
+  console.log(widthMain);
+
   return (
     <>
       <Header setMobileSidebar={setMobileSidebar} />
@@ -125,6 +141,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
           }}
         >
           <Box
+            ref={mainBlock}
             sx={{
               background: theme.palette.background.default,
               width: "100%",
@@ -135,6 +152,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
             <Page
               openBranchingPage={openBranchingPage}
               setOpenBranchingPage={openBranchingPageHC}
+              widthMain={widthMain}
             />
           </Box>
 
@@ -157,17 +175,19 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               }}
             >
               {isConditionMet &&
-                (isBranchingLogic ? (
+                (isBranchingLogicSmall ? (
                   <SmallSwitchQuestionListGraph
                     openBranchingPage={openBranchingPage}
                     setOpenBranchingPage={openBranchingPageHC}
                   />
-                ) : (
+                ) : widthMain < 1216 || !openBranchingPage ? (
                   <PanelSwitchQuestionListGraph
                     openBranchingPage={openBranchingPage}
                     setOpenBranchingPage={openBranchingPageHC}
                     hideText
                   />
+                ) : (
+                  <></>
                 ))}
               {/* Кнопка тестового просмотра  */}
               <ButtonTestPublication />

src/pages/startPage/EditPage.tsx

@@ -45,10 +45,12 @@ import { checkQuestionHint } from "@utils/checkQuestionHint";
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 export default function EditPage({
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
@@ -148,6 +150,7 @@ export default function EditPage({
                   quizStartPageType={quizConfig.startpageType}
                   openBranchingPage={openBranchingPage}
                   setOpenBranchingPage={setOpenBranchingPage}
+                  widthMain={widthMain}
                 />
               </>
             )}

src/ui_kit/switchStepPages.tsx

@@ -21,6 +21,7 @@ interface Props {
   quizResults: QuizResultsType;
   openBranchingPage: boolean;
   setOpenBranchingPage: (a: boolean) => void;
+  widthMain: number;
 }
 
 export default function SwitchStepPages({
@@ -30,6 +31,7 @@ export default function SwitchStepPages({
   quizResults,
   openBranchingPage,
   setOpenBranchingPage,
+  widthMain,
 }: Props) {
   switch (activeStep) {
     case 0: {
@@ -44,6 +46,7 @@ export default function SwitchStepPages({
         <QuestionsPage
           openBranchingPage={openBranchingPage}
           setOpenBranchingPage={setOpenBranchingPage}
+          widthMain={widthMain}
         />
       );
     case 2: