fix: resolve conflicts

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { Draggable } from "react-beautiful-dnd";
 import {
@@ -155,13 +155,11 @@ export const AnswerItem = ({
                       />
                     </IconButton>
                     <Popover
+                      id="my-popover-id"
                       open={isOpen}
                       anchorEl={anchorEl}
                       onClose={handleClose}
-                      anchorOrigin={{
+                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                        vertical: "bottom",
-                        horizontal: "left",
-                      }}
                     >
                       <TextareaAutosize
                         style={{ margin: "10px" }}

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -46,7 +46,7 @@ export default function DataOptions({ totalIndex }: Props) {
           gap: isMobile ? "18px" : "20px",
         }}
       >
-        <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap" }}>
+        <Box sx={{ gap: "10px", display: "flex", flexWrap: "wrap", mt: isMobile ? "25px" : "0px" }}>
           <SelectableButton
             isSelected={question.content.type === "calendar"}
             onClick={() => {
@@ -70,7 +70,7 @@ export default function DataOptions({ totalIndex }: Props) {
             Использовать маску
           </SelectableButton>
         </Box>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mb: "20px" }}>
+        <Box sx={{ display: "flex", alignItems: "flex-start", gap: "12px", mb: "20px" }}>
           <Typography
             sx={{
               fontWeight: 400,

src/pages/Questions/DataOptions/settingData.tsx

@@ -37,7 +37,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
     >
       <Box
         sx={{
-          pt: isMobile ? "25px" : "20px",
+          pt: "20px",
           pb: isMobile ? "25px" : "20px",
           pl: "20px",
           display: "flex",
@@ -79,7 +79,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
           display: "flex",
           flexDirection: "column",
           gap: isMobile ? "13px" : "14px",
-          width: "100%",
+          width: isMobile ? "auto" : "100%",
         }}
       >
         <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
@@ -103,7 +103,11 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
           }}
         >
           <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
             label={"Внутреннее название вопроса"}
             checked={question.content.innerNameCheck}
             handleChange={({ target }) => {

src/pages/Questions/DropDown/DropDown.tsx

@@ -65,7 +65,7 @@ export default function DropDown({ totalIndex }: Props) {
           sx={{
             display: "flex",
             alignItems: "center",
-            marginBottom: "17px",
+            marginBottom: "20px",
           }}
         >
           <Link
@@ -99,11 +99,7 @@ export default function DropDown({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchDropDown switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/DropDown/settingDropDown.tsx

@@ -116,8 +116,8 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
             pr: isFigmaTablte ? "19px" : "20px",
             display: "flex",
             flexDirection: "column",
-            gap: isMobile ? "13px" : "14px",
+            gap: "14px",
-            width: "100%",
+            width: isMobile ? "auto" : "100%",
           }}
         >
           <Typography
@@ -139,10 +139,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               });
             }}
           />
-          <Box
+          <Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>
-            sx={{ position: "relative", display: "flex", alignItems: "center" }}
-          >
             <CustomCheckbox
+              sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
               label={"Внутреннее название вопроса"}
               checked={question.content.innerNameCheck}
               handleChange={({ target }) => {
@@ -166,7 +165,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
           </Box>
           <Box
             sx={{
-              width: "85%",
+              width: "100%",
               pt: "20px",
               display: isMobile ? "block" : "none",
             }}

src/pages/Questions/Emoji/Emoji.tsx

@@ -28,16 +28,16 @@ interface Props {
 export default function Emoji({ totalIndex }: Props) {
   const [switchState, setSwitchState] = useState<string>("setting");
   const [open, setOpen] = useState<boolean>(false);
-  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(
+  const [anchorElement, setAnchorElement] = useState<HTMLDivElement | null>(null);
-    null
-  );
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const { listQuestions } = questionStore();
   const quizId = Number(useParams().quizId);
   const theme = useTheme();
   const question = listQuestions[quizId][totalIndex] as QuizQuestionEmoji;
+  const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
 
+
   const SSHC = (data: string) => {
     setSwitchState(data);
   };
@@ -198,7 +198,7 @@ export default function Emoji({ totalIndex }: Props) {
             }}
           />
         </Popover>
-        <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <Box sx={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: isMobile ? "17px" : "20px" }}>
           <Link
             component="button"
             variant="body2"
@@ -237,11 +237,7 @@ export default function Emoji({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchEmoji switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/Emoji/settingEmoji.tsx

@@ -80,8 +80,8 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
           pr: isFigmaTablte ? "30px" : "20px",
           display: "flex",
           flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
+          gap: "14px",
-          width: "100%",
+          width: isMobile ? "auto" : "100%",
         }}
       >
         <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
@@ -105,7 +105,11 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
           }}
         >
           <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
             label={"Внутреннее название вопроса"}
             checked={question.content.innerNameCheck}
             handleChange={({ target }) => {

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -353,7 +353,32 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                   backgroundColor: "#7E2AEA",
                 }}
               >
-                +
+                <Box
+                  sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
+                />
+                <ImageAddIcons
+                  style={{
+                    position: "absolute",
+                    color: "#7E2AEA",
+                    fontSize: "20px",
+                    left: "45%",
+                    right: "55%",
+                  }}
+                />
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                  }}
+                >
+                  +
+                </Box>
               </Box>
             </Box>
           )}

src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx

@@ -44,7 +44,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
       >
         <Box
           sx={{
-            pt: isMobile ? "25px" : "20px",
+            pt: isMobile ? "30px" : "20px",
             pb: isMobile ? "25px" : "20px",
             pl: "20px",
             display: "flex",
@@ -104,7 +104,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
             display: "flex",
             flexDirection: "column",
             gap: isMobile ? "13px" : "14px",
-            width: "100%",
+            width: isMobile ? "auto" : "100%",
           }}
         >
           <Typography

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
   Button,
   useTheme,
-  useMediaQuery,
+  useMediaQuery
 } from "@mui/material";
 
 import ButtonsOptions from "../ButtonsOptions";
@@ -33,6 +33,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
+  const isTablet = useMediaQuery(theme.breakpoints.down(790));
   const quizId = Number(useParams().quizId);
   const [switchState, setSwitchState] = useState("setting");
   const { listQuestions } = questionStore();
@@ -234,15 +235,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
+      <SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
-      <SwitchAnswerOptionsPict
-        switchState={switchState}
-        totalIndex={totalIndex}
-      />
     </>
   );
 }

src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx

@@ -228,6 +228,11 @@ export default function SettingOpytionsPict({
             sx={{
               marginBottom: "5px",
               opacity: question.content.xy !== "1:1" ? 1 : 0,
+              display: isTablet
+                ? question.content.xy === "1:1"
+                  ? "none"
+                  : "block"
+                : "block",
             }}
           >
             <Typography
@@ -265,6 +270,7 @@ export default function SettingOpytionsPict({
             Настройки вопросов
           </Typography>
           <CustomCheckbox
+            sx={{ alignItems: isMobile ? "flex-start" : "" }}
             label={"Необязательный вопрос"}
             checked={question.content.required}
             handleChange={({ target }) =>
@@ -281,6 +287,10 @@ export default function SettingOpytionsPict({
             }}
           >
             <CustomCheckbox
+              sx={{
+                height: isMobile ? "100%" : "26px",
+                alignItems: isMobile ? "flex-start" : "center",
+              }}
               label={"Внутреннее название вопроса"}
               checked={question.content.innerNameCheck}
               handleChange={({ target }) =>

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -41,7 +41,7 @@ export default function OwnTextField({ totalIndex }: Props) {
           width: "auto",
           maxWidth: "745px",
           display: "flex",
-          pb: "15px",
+          pb: "20px",
           pl: "20px",
           pr: "20px",
           flexDirection: "column",
@@ -52,9 +52,9 @@ export default function OwnTextField({ totalIndex }: Props) {
           placeholder={"Пример ответа"}
           text={question.content.placeholder}
           onChange={({ target }) => debounced(target.value)}
-          sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%" }}
+          sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%", mt: isMobile ? "15px" : "0px" }}
         />
-        <Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <Box sx={{ display: "flex", alignItems: isMobile ? "flex-start" : "center", gap: "12px" }}>
           <Typography
             sx={{
               fontWeight: 400,

src/pages/Questions/OwnTextField/settingTextField.tsx

@@ -109,17 +109,21 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
           pt: isMobile ? "0px" : "20px",
           pb: "20px",
           pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
-          pr: isFigmaTablte ? "14px" : "20px",
+          pr: "20px",
           display: "flex",
           flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
+          gap: "14px",
         }}
       >
         <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
           Настройки вопросов
         </Typography>
         <CustomCheckbox
-          sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            display: isMobile ? "flex" : "block",
+            mr: isMobile ? "0px" : "16px",
+            alignItems: isMobile ? "flex-end" : "center",
+          }}
           label={"Автозаполнение адреса"}
           checked={question.content.autofill}
           handleChange={({ target }) => {
@@ -129,7 +133,11 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
           }}
         />
         <CustomCheckbox
-          sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            display: isMobile ? "flex" : "block",
+            mr: isMobile ? "0px" : "16px",
+            alignItems: isMobile ? "flex-end" : "center",
+          }}
           label={"Необязательный вопрос"}
           checked={!question.required}
           handleChange={(e) => {
@@ -146,7 +154,12 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
           }}
         >
           <CustomCheckbox
-            sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              alignItems: isMobile ? "flex-start" : "center",
+              display: isMobile ? "flex" : "block",
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+            }}
             label={"Внутреннее название вопроса"}
             checked={question.content.innerNameCheck}
             handleChange={({ target }) => {

src/pages/Questions/PageOptions/PageOptions.tsx

@@ -55,13 +55,14 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
           gap: isMobile ? "25px" : "20px",
         }}
       >
-        <Box sx={{ display: disableInput ? "none" : "" }}>
+        <Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
           <CustomTextField
             placeholder={"Можно добавить текст"}
             text={question.content.text}
             onChange={({ target }) => debounced(target.value)}
           />
         </Box>
+
         <Box
           sx={{
             mb: "20px",
@@ -82,7 +83,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
             }}
           >
             {isMobile ? (
-              <AddPlusImage />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "120px",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px",
+                  }}
+                >
+                  <ImageAddIcons
+                    style={{
+                      color: "#7E2AEA",
+                      fontSize: "20px",
+                    }}
+                  />
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                    borderTopRightRadius: "4px",
+                    borderBottomRightRadius: "4px",
+                  }}
+                >
+                  +
+                </Box>
+              </Box>
             ) : (
               <Box
                 sx={{
@@ -150,7 +194,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
             }}
           >
             {isMobile ? (
-              <AddPlusVideo />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  width: "120px",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderTopLeftRadius: "4px",
+                    borderBottomLeftRadius: "4px",
+                  }}
+                >
+                  <VideofileIcon
+                    style={{
+                      color: "#7E2AEA",
+                      fontSize: "20px",
+                    }}
+                  />
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "20px",
+                    background: "#EEE4FC",
+                    height: "40px",
+                    color: "white",
+                    backgroundColor: "#7E2AEA",
+                    borderTopRightRadius: "4px",
+                    borderBottomRightRadius: "4px",
+                  }}
+                >
+                  +
+                </Box>
+              </Box>
             ) : (
               <Box
                 sx={{

src/pages/Questions/PageOptions/SettingPageOptions.tsx

@@ -20,7 +20,9 @@ type SettingPageOptionsProps = {
   totalIndex: number;
 };
 
-export default function SettingPageOptions({ totalIndex }: SettingPageOptionsProps) {
+export default function SettingPageOptions({
+  totalIndex,
+}: SettingPageOptionsProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const quizId = Number(useParams().quizId);
@@ -35,21 +37,33 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
   return (
     <Box
       sx={{
+        boxSizing: "border-box",
         pt: isMobile ? "25px" : "20px",
         pb: isMobile ? "25px" : "20px",
         pl: "20px",
+        pr: "20px",
         display: "flex",
         flexDirection: "column",
         gap: "14px",
-        width: "100%",
+        width: isMobile ? "auto" : "100%",
       }}
     >
-      <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+      <Typography
+        sx={{
+          height: isMobile ? "18px" : "auto",
+          fontWeight: "500",
+          fontSize: "18px",
+          color: " #4D4D4D",
+        }}
+      >
         Настройки вопроса
       </Typography>
-      <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+      <Box sx={{ display: "flex", alignItems: "flex-start" }}>
         <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            mr: isMobile ? "0px" : "16px",
+            height: isMobile ? "100%" : "26px",
+          }}
           label={"Внутреннее название вопроса"}
           checked={question.content.innerNameCheck}
           handleChange={({ target }) =>
@@ -62,7 +76,10 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
             })
           }
         />
-        <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
+        <Tooltip
+          title="Будет отображаться как заголовок вопроса в приходящих заявках."
+          placement="top"
+        >
           <Box>
             <InfoIcon />
           </Box>

src/pages/Questions/RatingOptions/settingRating.tsx

@@ -134,6 +134,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
       </Box>
       <Box
         sx={{
+          boxSizing: "border-box",
           pt: isMobile ? "30px" : "20px",
           pb: "20px",
           pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "40px",

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -34,17 +34,25 @@ export default function SliderOptions({ totalIndex }: Props) {
           maxWidth: "673.8px",
           display: "flex",
           pl: "20px",
-          pr: "20px",
+          pr: isMobile ? "13px" : "20px",
           pb: isMobile ? "30px" : "20px",
           flexDirection: "column",
-          gap: "20px",
+          gap: isMobile ? "25px" : "20px",
         }}
       >
-        <Box sx={{ gap: "14px", display: "flex", flexDirection: "column" }}>
+        <Box
+          sx={{
+            gap: isMobile ? "10px" : "14px",
+            mt: isMobile ? "25px" : "0px",
+            display: "flex",
+            flexDirection: "column",
+            marginRight: isMobile ? "10px" : "0px",
+          }}
+        >
           <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
             Выбор значения из диапазона
           </Typography>
-          <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: "20px" }}>
+          <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
             <CustomNumberField
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"0"}
@@ -131,11 +139,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                   });
 
                   if (range % step) {
-                    setStepError(
+                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                      `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                        max - min
-                      }`
-                    );
                   } else {
                     setStepError("");
                   }
@@ -154,7 +158,7 @@ export default function SliderOptions({ totalIndex }: Props) {
           }}
         >
           <Box sx={{ width: "100%" }}>
-            <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: "14px" }}>
+            <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
               Начальное значение
             </Typography>
             <CustomNumberField
@@ -206,11 +210,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                 }
 
                 if (range % step) {
-                  setStepError(
+                  setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                    `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                      max - min
-                    }`
-                  );
                 } else {
                   setStepError("");
                 }
@@ -219,11 +219,7 @@ export default function SliderOptions({ totalIndex }: Props) {
           </Box>
         </Box>
       </Box>
-      <ButtonsOptions
+      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchSlider switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/SliderOptions/settingSlider.tsx

@@ -37,19 +37,23 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
       <Box
         sx={{
           pt: isMobile ? "25px" : "20px",
-          pb: isMobile ? "25px" : "20px",
+          pb: isMobile ? "30px" : "20px",
           pl: "20px",
           display: "flex",
           flexDirection: "column",
           gap: "14px",
-          width: "100%",
+          width: isMobile ? "auto" : "100%",
         }}
       >
         <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
           Настройки ползунка
         </Typography>
         <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            mr: isMobile ? "0px" : "16px",
+            height: isMobile ? "100%" : "auto",
+            alignItems: isMobile ? "flex-start" : "center",
+          }}
           label={"Выбор диапозона (два ползунка)"}
           checked={question.content.chooseRange}
           handleChange={({ target }) => {
@@ -67,15 +71,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
           pr: isFigmaTablte ? (isMobile ? "20px" : "12px") : "20px",
           display: "flex",
           flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
+          gap: "14px",
-          width: "100%",
+          width: isMobile ? "auto" : "100%",
         }}
       >
         <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
           Настройки вопросов
         </Typography>
         <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{ mr: isMobile ? "0px" : "16px", alignItems: isMobile ? "flex-end" : "center" }}
           label={"Необязательный вопрос"}
           checked={!question.required}
           handleChange={(e) => {
@@ -88,11 +92,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
           sx={{
             width: isMobile ? "90%" : "auto",
             display: "flex",
-            alignItems: "center",
+            alignItems: "flex-start",
           }}
         >
           <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px", whiteSpace: isFigmaTablte ? "nowrap" : "" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "auto",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
             label={"Внутреннее название вопроса"}
             checked={question.content.innerNameCheck}
             handleChange={({ target }) => {

src/pages/Questions/UploadFile/UploadFile.tsx

@@ -85,7 +85,7 @@ export default function UploadFile({ totalIndex }: Props) {
           flexDirection: "column",
         }}
       >
-        <Box sx={{ gap: "10px", display: "flex" }}>
+        <Box sx={{ gap: "10px", display: "flex", mt: isMobile ? "15px" : "0px" }}>
           <FormControl
             fullWidth
             size="small"
@@ -166,9 +166,9 @@ export default function UploadFile({ totalIndex }: Props) {
         <Box
           sx={{
             display: "flex",
-            alignItems: "center",
+            alignItems: "flex-start",
             marginBottom: "20px",
-            marginTop: isMobile ? "18px" : "15px",
+            marginTop: "15px",
           }}
         >
           <Typography

src/pages/Questions/UploadFile/settingUpload.tsx

@@ -35,17 +35,23 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
   return (
     <Box
       sx={{
-        display: "flex",
+        boxSizing: "border-box",
-        flexDirection: "column",
+        pt: isMobile ? "30px" : "20px",
-        pt: "20px",
         pb: "20px",
         pl: "20px",
-        gap: "15px",
+        pr: isMobile ? "20px" : "0px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "14px",
+        width: isMobile ? "auto" : "100%",
       }}
     >
       <Typography>Настройки вопроса</Typography>
       <CustomCheckbox
-        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{
+          display: isMobile ? "flex" : "block",
+          mr: isMobile ? "0px" : "16px",
+        }}
         label={"Автозаполнение адреса"}
         checked={question.content.autofill}
         handleChange={({ target }) => {
@@ -55,7 +61,10 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
         }}
       />
       <CustomCheckbox
-        sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+        sx={{
+          display: isMobile ? "flex" : "block",
+          mr: isMobile ? "0px" : "16px",
+        }}
         label={"Необязательный вопрос"}
         checked={!question.required}
         handleChange={(e) => {
@@ -72,7 +81,11 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
         }}
       >
         <CustomCheckbox
-          sx={{ mr: isMobile ? "0px" : "16px" }}
+          sx={{
+            mr: isMobile ? "0px" : "16px",
+            height: isMobile ? "100%" : "26px",
+            alignItems: "flex-start",
+          }}
           label={"Внутреннее название вопроса"}
           checked={question.content.innerNameCheck}
           handleChange={({ target }) => {
@@ -99,10 +112,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
           placeholder={"Развёрнутое описание вопроса"}
           text={question.content.innerName}
           onChange={({ target }) => debounced(target.value)}
-          sx={{
+          sx={{ paddingRight: "20px" }}
-            boxSizing: "border-box",
-            paddingRight: "20px",
-          }}
         />
       )}
     </Box>

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -94,11 +94,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptionsAndPict
+      <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchAnswerOptions switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/answerOptions/responseSettings.tsx

@@ -1,5 +1,11 @@
 import { useParams } from "react-router-dom";
-import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import { useDebouncedCallback } from "use-debounce";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import InfoIcon from "../../../assets/icons/InfoIcon";
@@ -17,6 +23,7 @@ export default function ResponseSettings({ totalIndex }: Props) {
   const { listQuestions } = questionStore();
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(900));
+
   const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const question = listQuestions[quizId][totalIndex] as QuizQuestionVariant;
@@ -46,7 +53,14 @@ export default function ResponseSettings({ totalIndex }: Props) {
           width: "100%",
         }}
       >
-        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
           Настройки ответов
         </Typography>
         <CustomCheckbox
@@ -85,17 +99,25 @@ export default function ResponseSettings({ totalIndex }: Props) {
       </Box>
       <Box
         sx={{
+          boxSizing: "border-box",
           pt: isMobile ? "0px" : "20px",
           pb: "20px",
-          pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
+          pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px",
           pr: isFigmaTablte ? "19px" : "20px",
           display: "flex",
           flexDirection: "column",
-          gap: isMobile ? "13px" : "14px",
+          gap: "14px",
           width: "100%",
         }}
       >
-        <Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
+        <Typography
+          sx={{
+            height: isMobile ? "18px" : "auto",
+            fontWeight: "500",
+            fontSize: "18px",
+            color: " #4D4D4D",
+          }}
+        >
           Настройки вопросов
         </Typography>
         <CustomCheckbox
@@ -116,7 +138,11 @@ export default function ResponseSettings({ totalIndex }: Props) {
           }}
         >
           <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "9px", height: isMobile ? "42px" : "26px", alignItems: "start" }}
+            sx={{
+              mr: isMobile ? "0px" : "9px",
+              height: isMobile ? "42px" : "26px",
+              alignItems: "start",
+            }}
             label={"Внутреннее название вопроса"}
             checked={question.content.innerNameCheck}
             handleChange={({ target }) => {
@@ -129,14 +155,16 @@ export default function ResponseSettings({ totalIndex }: Props) {
               });
             }}
           />
-          {isMobile ||
+          {isMobile && (
-            (!isFigmaTablte && (
+            <Tooltip
-              <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
+              title="Будет отображаться как заголовок вопроса в приходящих заявках."
-                <Box>
+              placement="top"
-                  <InfoIcon />
+            >
-                </Box>
+              <Box>
-              </Tooltip>
+                <InfoIcon />
-            ))}
+              </Box>
+            </Tooltip>
+          )}
         </Box>
         {question.content.innerNameCheck && (
           <CustomTextField