фикс отъезжающего нижнего меню при открытии верхнего меню в мобилке

src/pages/DesignPage/DesignFilling.tsx

@@ -28,11 +28,18 @@ const ButtonsThemeDark = [
   ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
   ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
 ];
-export const DesignFilling = (mobileSidebar: boolean) => {
+
+interface Props {
+  mobileSidebar: boolean;
+  heightSidebar: number;
+}
+
+export const DesignFilling = ({ mobileSidebar, heightSidebar }: Props) => {
   const quiz = useCurrentQuiz();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(830));
-
+  const heightBar = heightSidebar + 51 + 88 + 36;
+  console.log(mobileSidebar, "111");
   return (
     <Box
       sx={{
@@ -40,7 +47,7 @@ export const DesignFilling = (mobileSidebar: boolean) => {
         padding: "25px",
         height: isMobile
           ? mobileSidebar
-            ? "calc(100vh - 271px)"
+            ? `calc(100vh - ${heightBar}px)`
             : "calc(100vh - 127px)"
           : "calc(100vh - 80px)",
       }}

src/pages/DesignPage/DesignPage.tsx

@@ -22,7 +22,12 @@ import { DesignFilling } from "./DesignFilling";
 import { createPortal } from "react-dom";
 import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
 
-export const DesignPage = () => {
+interface Props {
+  heightSidebar: number;
+  mobileSidebar: boolean;
+}
+
+export const DesignPage = ({ heightSidebar, mobileSidebar }: Props) => {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
   const { showConfirmLeaveModal } = useUiTools();
@@ -30,7 +35,6 @@ export const DesignPage = () => {
   const navigate = useNavigate();
   const currentStep = useQuizStore((state) => state.currentStep);
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
-  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
   const [nextStep, setNextStep] = useState<number>(0);
 
   useEffect(
@@ -69,7 +73,10 @@ export const DesignPage = () => {
   return (
     <>
       <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}>
-        <DesignFilling mobileSidebar={mobileSidebar} />
+        <DesignFilling
+          mobileSidebar={mobileSidebar}
+          heightSidebar={heightSidebar}
+        />
         {createPortal(<QuizPreview />, document.body)}
       </Box>
       <ConfirmLeaveModal

src/pages/Questions/QuestionsPage.tsx

@@ -66,7 +66,7 @@ export default function QuestionsPage({
           margin: "60px 0 40px 0",
         }}
       >
-        <Typography variant={"h5"}>
+        <Typography variant={"h5"} sx={{ wordBreak: "break-word" }}>
           {quiz.name ? quiz.name : "Заголовок quiz"}
         </Typography>
         {!openBranchingPage && (

src/pages/main.tsx

@@ -95,8 +95,9 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
   };
 
   const [widthMain, setWidthMain] = useState(null);
+  const [heightSidebar, setHeightSidebar] = useState(null);
   const mainBlock = useRef(0);
-
+  const heightHeader = heightSidebar + 51 + 36;
   const observer = useRef(
     new ResizeObserver((entries) => {
       const { width } = entries[0].contentRect;
@@ -121,7 +122,11 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
         {sidebar ? (
           <>
             {isMobile ? (
-              <SidebarMobile open={mobileSidebar} changePage={changePage} />
+              <SidebarMobile
+                open={mobileSidebar}
+                changePage={changePage}
+                setHeightSitebar={setHeightSidebar}
+              />
             ) : (
               <Sidebar changePage={changePage} />
             )}
@@ -134,7 +139,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
             width: "100%",
             height: isMobile
               ? mobileSidebar
-                ? "calc(100vh - 195px)"
+                ? `calc(100vh - ${heightHeader}px)`
                 : "calc(100vh - 51px)"
               : "calc(100vh - 80px)",
             display: "flex",
@@ -157,6 +162,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               setOpenBranchingPage={openBranchingPageHC}
               widthMain={widthMain}
               mobileSidebar={mobileSidebar}
+              heightSidebar={heightSidebar}
             />
           </Box>
 

src/pages/startPage/EditPage.tsx

@@ -47,12 +47,14 @@ interface Props {
   setOpenBranchingPage: (a: boolean) => void;
   widthMain: number;
   mobileSidebar: boolean;
+  heightSidebar: number;
 }
 export default function EditPage({
   openBranchingPage,
   setOpenBranchingPage,
   widthMain,
   mobileSidebar,
+  heightSidebar,
 }: Props) {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
@@ -67,6 +69,7 @@ export default function EditPage({
   const quizConfig = quiz?.config;
   // const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
 
+  const heightBar = heightSidebar + 51 + 88 + 23;
   useEffect(() => {
     if (editQuizId === null) navigate("/list");
   }, [navigate, editQuizId]);
@@ -133,7 +136,7 @@ export default function EditPage({
               overflow: "auto",
               height: isMobile
                 ? mobileSidebar
-                  ? `calc(100vh - 269px)`
+                  ? `calc(100vh - ${heightBar}px)`
                   : `calc(100vh - 125px)`
                 : isConditionMet
                   ? isBranchingLogic

src/ui_kit/Sidebar/SidebarMobile.tsx

@@ -32,6 +32,7 @@ import { clearUserData } from "@root/user";
 interface Iprops {
   open: boolean;
   changePage: (step: number) => void;
+  setHeightSitebar: any;
 }
 
 const quizSetupSteps = [
@@ -46,12 +47,29 @@ const quizSetupSteps = [
   { sidebarIcon: <Question style={{ color: "#974BFA", fontSize: "24px" }} /> },
 ] as const;
 
-export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
+export const SidebarMobile: FC<Iprops> = ({
+  open,
+  changePage,
+  setHeightSitebar,
+}) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [inputOpen, setInputOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const ref = useRef(null);
+  const heightSidebar = useRef(null);
   const navigate = useNavigate();
+
+  const observer = useRef(
+    new ResizeObserver((entries) => {
+      const { height } = entries[0].contentRect;
+      setHeightSitebar(height);
+    }),
+  );
+
+  useEffect(() => {
+    observer.current.observe(heightSidebar.current);
+  }, [heightSidebar, observer]);
+
   const handleClick = (event) => {
     setAnchorEl(anchorEl ? null : event.currentTarget);
   };
@@ -80,6 +98,7 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
   const id = openPopper ? "simple-popper" : undefined;
   return (
     <Box
+      ref={heightSidebar}
       sx={{
         display: open ? "block" : "none",
         minHeight: "134px",
@@ -148,7 +167,9 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
                 />
               </FormControl>
             ) : (
-              <Typography color={"white"}>{quiz.name}</Typography>
+              <Typography color={"white"} sx={{ wordBreak: "break-word" }}>
+                {quiz.name}
+              </Typography>
             )}
           </Box>
           <IconButton onClick={() => setInputOpen(true)}>