правки по адаптивности

src/pages/ContactFormPage/DrawerParent.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import Button from "@mui/material/Button";
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
 
 interface Props {
   outerContainerSx?: SxProps<Theme>;
@@ -17,6 +17,8 @@ export default function DrawerNewField({
   isOpenDrawer: isOpen,
   drawerNewFieldHC,
 }: Props) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   return (
     <>
       <Drawer
@@ -24,7 +26,7 @@ export default function DrawerNewField({
         open={Boolean(isOpen)}
         onClose={() => drawerNewFieldHC("")}
       >
-        <Box sx={{ width: 450 }} role="presentation">
+        <Box sx={{ width: isMobile ? 320 : 450 }} role="presentation">
           {children}
         </Box>
       </Drawer>

src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx

@@ -12,6 +12,7 @@ import {
   Typography,
   useTheme,
   Checkbox,
+  useMediaQuery,
 } from "@mui/material";
 import {
   AnyTypedQuizQuestion,
@@ -33,10 +34,11 @@ import {
 import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";
 import { enqueueSnackbar } from "notistack";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 export default function BranchingQuestions() {
   const theme = useTheme();
-
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const { openedModalSettingsId } = useUiTools();
   const [targetQuestion, setTargetQuestion] =
     useState<AnyTypedQuizQuestion | null>(
@@ -119,14 +121,22 @@ export default function BranchingQuestions() {
               <Box sx={{ color: "#4d4d4d" }}>
                 <Typography component="span">{targetQuestion.title}</Typography>
               </Box>
-              <Tooltip
+              {isMobile ? (
-                title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
+                <TooltipClickInfo
-                placement="top"
+                  title={
-              >
+                    "Настройте условия, при которых данный вопрос будет отображаться в quiz."
-                <Box>
+                  }
-                  <InfoIcon />
+                />
-                </Box>
+              ) : (
-              </Tooltip>
+                <Tooltip
+                  title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
+                  placement="top"
+                >
+                  <Box>
+                    <InfoIcon />
+                  </Box>
+                </Tooltip>
+              )}
             </Box>
 
             <Box

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -10,6 +10,7 @@ import InfoIcon from "../../../assets/icons/InfoIcon";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchData from "./switchData";
 import { QuizQuestionDate } from "@model/questionTypes/date";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 interface Props {
   question: QuizQuestionDate;
@@ -55,11 +56,15 @@ export default function DataOptions({ question }: Props) {
           >
             Пользователю будет предложено выбрать дату
           </Typography>
-          <Tooltip title="Выбор даты." placement="top">
+          {isMobile ? (
-            <Box>
+            <TooltipClickInfo title={"Выбор даты."} />
-              <InfoIcon />
+          ) : (
-            </Box>
+            <Tooltip title="Выбор даты." placement="top">
-          </Tooltip>
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          )}
         </Box>
       </Box>
       <ButtonsOptions

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -19,6 +19,7 @@ import type {
 } from "../../../model/questionTypes/file";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchUpload from "./switchUpload";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 type DesignItem = {
   name: string;
@@ -180,14 +181,20 @@ export default function UploadFile({ question }: Props) {
           >
             Пользователь может загрузить любой собственный файл
           </Typography>
-          <Tooltip
+          {isMobile ? (
-            title="Можно загрузить файл в желаемом формате."
+            <TooltipClickInfo
-            placement="top"
+              title={"Можно загрузить файл в желаемом формате."}
-          >
+            />
-            <Box>
+          ) : (
-              <InfoIcon />
+            <Tooltip
-            </Box>
+              title="Можно загрузить файл в желаемом формате."
-          </Tooltip>
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          )}
         </Box>
       </Box>
       <ButtonsOptions

src/pages/ResultPage/Result.tsx

@@ -1,13 +1,15 @@
-import { Box, Button, Tooltip } from "@mui/material";
+import { Box, Button, Tooltip, useMediaQuery, useTheme } from "@mui/material";
 import { updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import image from "../../assets/Rectangle 110.png";
 import Info from "../../assets/icons/Info";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 // import CreationFullCard from "./FirstEntry";
 
 export const Result = () => {
   const quiz = useCurrentQuiz();
-
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   if (!quiz) return null;
 
   return (
@@ -29,11 +31,15 @@ export const Result = () => {
         >
           Создать результаты
         </Button>
-        <Tooltip title="Посмотреть справку" placement="top">
+        {isMobile ? (
-          <Box>
+          <TooltipClickInfo title={"Посмотреть справку"} />
-            <Info />
+        ) : (
-          </Box>
+          <Tooltip title="Посмотреть справку" placement="top">
-        </Tooltip>
+            <Box>
+              <Info />
+            </Box>
+          </Tooltip>
+        )}
       </Box>
     </Box>
   );

src/pages/ResultPage/cards/ResultCard.tsx

@@ -391,7 +391,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                     </IconButton>
                   </Box>
 
-                  <TextField
+                  <CustomTextField
                     value={resultData.content.hint.text}
                     onChange={({ target }: { target: HTMLInputElement }) =>
                       updateQuestion(
@@ -401,11 +401,12 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                       )
                     }
                     fullWidth
+                    maxLength={19}
                     placeholder="Например: узнать подробнее"
                     sx={{
                       "& .MuiInputBase-root": {
                         backgroundColor: "#F2F3F7",
-                        width: "409px",
+                        width: isMobile ? undefined : "409px",
                         height: "48px",
                         borderRadius: "8px",
                       },

src/pages/ResultPage/cards/WhenCard.tsx

@@ -205,9 +205,13 @@ export const WhenCard = ({ quizExpand }: Props) => {
                         quiz?.config.resultInfo.when === value
                           ? " white"
                           : "#9A9AAF",
-                      minWidth: isSmallMonitor ? "310px" : "auto",
+                      minWidth: isSmallMonitor
+                        ? isMobile
+                          ? undefined
+                          : "310px"
+                        : "auto",
                       borderRadius: "8px",
-                      width: "220px",
+                      width: isMobile ? "100%" : "220px",
                       height: "44px",
                       fontSize: "17px",
                       border:

src/pages/ViewPublicationPage/ContactForm.tsx

@@ -7,6 +7,7 @@ import {
   Link,
   InputAdornment,
   useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
@@ -75,6 +76,7 @@ export const ContactForm = ({
   const mode = modes;
   const { questions } = useQuestionsStore();
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const [ready, setReady] = useState(false);
   const followNextForm = () => {
     setShowContactForm(false);
@@ -108,8 +110,10 @@ export const ContactForm = ({
     >
       <Box
         sx={{
-          width: "530px",
+          width: isMobile ? "330px" : "530px",
           borderRadius: "4px",
+          overflow: "auto",
+          height: "90vh",
           boxShadow:
             "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
         }}
@@ -184,7 +188,7 @@ export const ContactForm = ({
             sx={{
               display: "flex",
               mt: "20px",
-              width: "450px",
+              width: isMobile ? "300px" : "450px",
             }}
           >
             <CustomCheckbox
@@ -321,12 +325,14 @@ const Inputs = (currentQuestion: any) => {
 };
 
 const CustomInput = ({ title, desc, Icon }: any) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   return (
     <Box m="15px 0">
       <Typography mb="7px">{title}</Typography>
       <TextField
         sx={{
-          width: "350px",
+          width: isMobile ? "300px" : "350px",
         }}
         placeholder={desc}
         InputProps={{

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -84,7 +84,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
       ) : null
     ) : null;
 
-    console.log(background)
+  console.log(background);
 
   return (
     <Paper

src/pages/main.tsx

@@ -234,20 +234,22 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                   <LinkSimple />
                 </Box>
               )}
-              <Box sx={{ textAlign: "end", width: "100%" }}>
+              {currentStep === 1 && (
-                <IconButton
+                <Box sx={{ textAlign: "end", width: "100%" }}>
-                  onClick={toggleQuizPreview}
+                  <IconButton
-                  sx={{
+                    onClick={toggleQuizPreview}
-                    pointerEvents: "auto",
+                    sx={{
-                    marginLeft: "auto",
+                      pointerEvents: "auto",
-                    position: "relative",
+                      marginLeft: "auto",
-                    zIndex: "999999",
+                      position: "relative",
-                    alignItems: "end",
+                      zIndex: "999999",
-                  }}
+                      alignItems: "end",
-                >
+                    }}
-                  <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
+                  >
-                </IconButton>
+                    <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
-              </Box>
+                  </IconButton>
+                </Box>
+              )}
             </Box>
           )}
         </Box>

src/pages/startPage/StartPageSettings.tsx

@@ -46,6 +46,7 @@ import ModalSizeImage from "./ModalSizeImage";
 import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 
 const designTypes = [
   [
@@ -68,6 +69,7 @@ const designTypes = [
 
 export default function StartPageSettings() {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
   const isTablet = useMediaQuery(theme.breakpoints.down(950));
   const quiz = useCurrentQuiz();
@@ -302,122 +304,131 @@ export default function StartPageSettings() {
               </SelectableButton>
             </Box>
 
-{quiz.config.startpage.background.type === "image" &&
+            {quiz.config.startpage.background.type === "image" && (
-            <Box
-              sx={{
-                display:
-                  quiz.config.startpage.background.type === "image"
-                    ? "flex"
-                    : "none",
-                flexDirection: "column",
-              }}
-            >
               <Box
                 sx={{
-                  display: mobileVersion ? "none" : "flex",
+                  display:
+                    quiz.config.startpage.background.type === "image"
+                      ? "flex"
+                      : "none",
                   flexDirection: "column",
                 }}
               >
-                <Typography
+                <Box
                   sx={{
-                    fontWeight: 500,
+                    display: mobileVersion ? "none" : "flex",
-                    color: theme.palette.grey3.main,
+                    flexDirection: "column",
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontWeight: 500,
+                      color: theme.palette.grey3.main,
+                      mt: "20px",
+                      mb: "14px",
+                    }}
+                  >
+                    Изображение
+                  </Typography>
+                  <DropZone
+                    value={"5 MB максимум"}
+                    sx={{ maxWidth: "300px" }}
+                    imageUrl={quiz.config.startpage.background.desktop}
+                    originalImageUrl={
+                      quiz.config.startpage.background.originalDesktop
+                    }
+                    onImageUploadClick={(file) => {
+                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        quiz.config.startpage.background.desktop = url;
+                        quiz.config.startpage.background.originalDesktop = url;
+                      });
+                    }}
+                    onImageSaveClick={(file) => {
+                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        quiz.config.startpage.background.desktop = url;
+                      });
+                    }}
+                    onDeleteClick={() => {
+                      updateQuiz(quiz.id, (quiz) => {
+                        quiz.config.startpage.background.desktop = null;
+                      });
+                    }}
+                  />
+                </Box>
+
+                <ModalSizeImage />
+              </Box>
+            )}
+
+            {quiz.config.startpage.background.type === "video" && (
+              <>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "7px",
                     mt: "20px",
                     mb: "14px",
                   }}
                 >
-                  Изображение
+                  <Typography
-                </Typography>
+                    sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
-                <DropZone
+                  >
-                  value={"5 MB максимум"}
+                    Добавить видео
-                  sx={{ maxWidth: "300px" }}
+                  </Typography>
-                  imageUrl={quiz.config.startpage.background.desktop}
+                  {isMobile ? (
-                  originalImageUrl={
+                    <TooltipClickInfo title={"Можно загрузить видео."} />
-                    quiz.config.startpage.background.originalDesktop
+                  ) : (
-                  }
+                    <Tooltip title="Можно загрузить видео." placement="top">
-                  onImageUploadClick={(file) => {
+                      <Box>
-                    uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        <InfoIcon />
-                      quiz.config.startpage.background.desktop = url;
+                      </Box>
-                      quiz.config.startpage.background.originalDesktop = url;
+                    </Tooltip>
-                    });
+                  )}
-                  }}
+                </Box>
-                  onImageSaveClick={(file) => {
+                <ButtonBase
-                    uploadQuizImage(quiz.id, file, (quiz, url) => {
+                  component="label"
-                      quiz.config.startpage.background.desktop = url;
-                    });
-                  }}
-                  onDeleteClick={() => {
-                    updateQuiz(quiz.id, (quiz) => {
-                      quiz.config.startpage.background.desktop = null;
-                    });
-                  }}
-                />
-              </Box>
-
-              <ModalSizeImage />
-            </Box>
-
-}
-
-{quiz.config.startpage.background.type === "video" && <>
-            <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "7px",
-                  mt: "20px",
-                  mb: "14px",
-                }}
-              >
-                <Typography
-                  sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
-                >
-                  Добавить видео
-                </Typography>
-                <Tooltip title="Можно загрузить видео." placement="top">
-                  <Box>
-                    <InfoIcon />
-                  </Box>
-                </Tooltip>
-              </Box>
-              <ButtonBase
-                component="label"
-                sx={{ justifyContent: "center",
-                height: "48px",
-                width: "48px",  
-                display: "flex",
-                alignItems: "center",
-                my: "20px"
-              }}
-              >
-                <input
-                  onChange={(event) => {
-                    const file = event.target.files?.[0];
-                    if (file) {
-                      uploadQuizImage(quiz.id, file, (quiz, url) => {
-                        quiz.config.startpage.background.video = url;
-                      });
-                      // setVideo(URL.createObjectURL(file));
-                    }
-                
-                  }}
-                  hidden
-                  accept=".mp4"
-                  multiple
-                  type="file"
-                />
-                <UploadBox
-                  icon={<UploadIcon />}
                   sx={{
+                    justifyContent: "center",
                     height: "48px",
                     width: "48px",
+                    display: "flex",
+                    alignItems: "center",
+                    my: "20px",
                   }}
-                />
+                >
+                  <input
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (file) {
+                        uploadQuizImage(quiz.id, file, (quiz, url) => {
+                          quiz.config.startpage.background.video = url;
+                        });
+                        // setVideo(URL.createObjectURL(file));
+                      }
+                    }}
+                    hidden
+                    accept=".mp4"
+                    multiple
+                    type="file"
+                  />
+                  <UploadBox
+                    icon={<UploadIcon />}
+                    sx={{
+                      height: "48px",
+                      width: "48px",
+                    }}
+                  />
                 </ButtonBase>
-                {quiz.config.startpage.background.video ? <video src={quiz.config.startpage.background.video} width="400" controls /> : null}
+                {quiz.config.startpage.background.video ? (
-
+                  <video
-
+                    src={quiz.config.startpage.background.video}
-</>}
+                    width="400"
+                    controls
+                  />
+                ) : null}
+              </>
+            )}
             {designType !== "centered" && (
               <>
                 <Typography

src/ui_kit/Header/Header.tsx

@@ -131,6 +131,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
           />
         ) : (
           <>
+            <ToTariffsButton />
             <Box
               sx={{
                 display: "flex",
@@ -140,7 +141,6 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
             >
               <LogoutButton onClick={handleLogoutClick} />
             </Box>
-            <ToTariffsButton />
           </>
         )}
       </Box>

src/ui_kit/Header/HeaderFull.tsx

@@ -57,16 +57,8 @@ export default function HeaderFull() {
       <Link to="/">
         <Logotip width={124} />
       </Link>
-      {!isTablet && (
-        <Box
-          sx={{
-            display: "flex",
-            gap: "30px",
-            overflow: "hidden",
-          }}
-        ></Box>
-      )}
       <Box sx={{ display: "flex", ml: "auto" }}>
+        <ToTariffsButton />
         <LogoutButton
           onClick={handleLogoutClick}
           sx={{
@@ -74,7 +66,6 @@ export default function HeaderFull() {
           }}
         />
       </Box>
-      <ToTariffsButton />
     </Container>
   );
 }

src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx

@@ -6,7 +6,6 @@ interface Props {
 }
 
 export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
-
   const extractYoutubeVideoId =
     /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
   const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
@@ -15,7 +14,7 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
   const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
   // https://www.youtube.com/shorts/9VgqBPd6RPA
   // https://www.youtube.com/watch?v=I2N8hTHhvGY
-  console.log()
+  console.log();
   return (
     <Box
       sx={{
@@ -34,11 +33,9 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
         sx={{
           width: "100%",
           height: "100%",
-
         }}
         autoPlay
         muted
-
         src={videoUrl}
       />
       {/* <iframe

src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx

@@ -17,7 +17,7 @@ export const SmallSwitchQuestionListGraph = ({
         width: "77px",
         height: "51px",
         position: "fixed",
-        zIndex: "99999",
+        zIndex: "1111",
         right: "0",
         top: "200px",
         background: "#333647",

src/ui_kit/Toolbars/TooltipClickInfo.tsx

@@ -20,6 +20,7 @@ export default function TooltipClickInfo({ title }: string) {
             PopperProps={{
               disablePortal: true,
             }}
+            placement="top"
             onClose={handleTooltipClose}
             open={open}
             disableFocusListener