Mobile version adaptive

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -40,12 +40,12 @@ export const AnswerItem = ({
   variant,
   additionalContent,
   additionalMobile,
-  icon
+  icon,
 }: AnswerItemProps) => {
   const quizId = Number(useParams().quizId);
   const { listQuestions } = questionStore();
   const theme = useTheme();
-  const isTablet = useMediaQuery(theme.breakpoints.down(790));
+  const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const debounced = useDebouncedCallback((value) => {
     const answerNew = variants.slice();
     answerNew[index].answer = value;
@@ -114,13 +114,7 @@ export const AnswerItem = ({
             key={index}
             fullWidth
             variant="standard"
-            sx={{ padding: isTablet ? " 20px 0 20px 0" : "0 0 18px 0" }}
+            sx={{ padding: isMobile ? " 15px 0 15px 0" : "0 0 18px 0" }}
-            // sx={{
-            //   margin: isTablet ? " 15px 0 20px 0" : "0 0 20px 0",
-            //   borderRadius: "10px",
-            //   border: "1px solid rgba(0, 0, 0, 0.23)",
-            //   background: "white",
-            // }}
           >
             <TextField
               defaultValue={variant.answer}
@@ -140,7 +134,7 @@ export const AnswerItem = ({
                     <InputAdornment {...provided.dragHandleProps} position="start">
                       <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
                     </InputAdornment>
-                    {additionalContent}
+                    {icon && icon}
                   </>
                 ),
                 endAdornment: (
@@ -149,13 +143,11 @@ export const AnswerItem = ({
                       <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
                     </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" }}
@@ -172,22 +164,17 @@ export const AnswerItem = ({
                 ),
               }}
               sx={{
-                padding: isTablet ? "10px 0px" : 0,
                 "& .MuiInputBase-root": {
                   padding: icon ? "5px 13.5px" : "13.5px  13.5px  13.5px  9px",
                   borderRadius: "8px",
                   height: "48px",
                   background: "#ffffff",
-                  "& .MuiOutlinedInput-notchedOutline": {
-                    border: "none",
-                  },
                 },
               }}
               inputProps={{
                 sx: { fontSize: "18px", lineHeight: "21px", py: 0, ml: "13px" },
               }}
             />
-            {additionalMobile}
           </FormControl>
         </Box>
       )}

src/pages/Questions/DataOptions/DataOptions.tsx

@@ -43,7 +43,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={listQuestions[quizId][totalIndex].content.type === "calendar"}
             onClick={() => {
@@ -67,7 +67,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

@@ -34,7 +34,7 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
     >
       <Box
         sx={{
-          pt: isMobile ? "25px" : "20px",
+          pt: "20px",
           pb: isMobile ? "25px" : "20px",
           pl: "20px",
           display: "flex",
@@ -76,7 +76,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" }}>
@@ -92,9 +92,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) {
             });
           }}
         />
-        <Box sx={{ width: isMobile ? "93%" : "auto", display: "flex", alignItems: "center" }}>
+        <Box sx={{ width: isMobile ? "93%" : "auto", display: "flex", alignItems: "flex-start" }}>
           <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
             label={"Внутреннее название вопроса"}
             checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
             handleChange={(e) => {

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -120,7 +120,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
-            padding: isTablet ? (isMobile ? "20px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
+            padding: isTablet ? (isMobile ? "10px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px",
             flexDirection: isMobile ? "column-reverse" : null,
           }}
         >
@@ -243,9 +243,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
                     onClick={() => {
                       const removedId = listQuestions[quizId][totalIndex].id;
                       if (listQuestions[quizId][totalIndex].deleteTimeoutId) {
-                        clearTimeout(
+                        clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId);
-                          listQuestions[quizId][totalIndex].deleteTimeoutId
-                        );
                       }
 
                       removeQuestion(quizId, totalIndex);

src/pages/Questions/DropDown/DropDown.tsx

@@ -59,7 +59,7 @@ export default function DropDown({ totalIndex }: Props) {
           sx={{
             display: "flex",
             alignItems: "center",
-            marginBottom: "17px",
+            marginBottom: "20px",
           }}
         >
           <Link
@@ -93,11 +93,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

@@ -99,8 +99,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
@@ -117,8 +117,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               });
             }}
           />
-          <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
+          <Box sx={{ position: "relative", display: "flex", alignItems: "flex-start" }}>
             <CustomCheckbox
+              sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
               label={"Внутреннее название вопроса"}
               checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
               handleChange={(e) => {
@@ -144,7 +145,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

@@ -34,9 +34,7 @@ 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);
@@ -157,7 +155,7 @@ export default function Emoji({ totalIndex }: Props) {
           )}
         </Box>
         <Box sx={{ display: "flex", alignItems: "center", marginBottom: "20px" }}> */}
-      <Box sx={{ padding: "20px" }}>
+      <Box sx={{ padding: "0 20px 0px 20px" }}>
         <AnswerDraggableList
           variants={listQuestions[quizId][totalIndex].content.variants}
           totalIndex={totalIndex}
@@ -288,9 +286,7 @@ export default function Emoji({ totalIndex }: Props) {
           <EmojiPicker
             onEmojiSelect={({ native }) => {
               setOpen(false);
-              const cloneVariants = [
+              const cloneVariants = [...listQuestions[quizId][totalIndex].content.variants];
-                ...listQuestions[quizId][totalIndex].content.variants,
-              ];
 
               cloneVariants[currentIndex] = {
                 ...cloneVariants[currentIndex],
@@ -306,14 +302,13 @@ 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"
             sx={{ color: theme.palette.brightPurple.main }}
             onClick={() => {
-              const answerNew =
+              const answerNew = listQuestions[quizId][totalIndex].content.variants.slice();
-                listQuestions[quizId][totalIndex].content.variants.slice();
               answerNew.push({ answer: "", hints: "", emoji: "" });
 
               updateQuestionsList(quizId, totalIndex, {
@@ -343,11 +338,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

@@ -77,8 +77,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" }}>
@@ -94,9 +94,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
             });
           }}
         />
-        <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
           <CustomCheckbox
-            sx={{ mr: isMobile ? "0px" : "16px" }}
+            sx={{
+              mr: isMobile ? "0px" : "16px",
+              height: isMobile ? "100%" : "26px",
+              alignItems: isMobile ? "flex-start" : "center",
+            }}
             label={"Внутреннее название вопроса"}
             checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
             handleChange={(e) => {

src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

@@ -90,7 +90,15 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                     justifyContent: "space-between",
                   }}
                 >
-                  <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
+                  <Box
+                    sx={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "100%",
+                      maxHeight: "98px",
+                    }}
+                  >
                     <ImageAddIcons fontSize="22px" color="#7E2AEA" />
                   </Box>
                   <span
@@ -179,15 +187,8 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                     <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
                       <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
                     </IconButton>
-                    <Popover
+                    <Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
-                      id="my-popover-id"
+                      <TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                      open={false}
-                    >
-                      <TextareaAutosize
-                        style={{ margin: "10px" }}
-                        placeholder="Подсказка для этого ответа"
-                      />
                     </Popover>
                     <IconButton sx={{ padding: "0" }}>
                       <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
@@ -200,7 +201,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                   padding: "13.5px",
                   borderRadius: "10px",
                   background: "#ffffff",
-                  height: "48px",
+                  height: isMobile ? "41px" : "48px",
                 },
                 "& .MuiOutlinedInput-notchedOutline": {
                   border: "none",
@@ -220,9 +221,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
                   position: "relative",
                 }}
               >
-                <Box
+                <Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
-                  sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                />
                 <ImageAddIcons
                   style={{
                     position: "absolute",
@@ -293,11 +292,7 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
           )}
         </Box>
       </Box>
-      <ButtonsOptionsAndPict
+      <ButtonsOptionsAndPict switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
-        switchState={switchState}
-        SSHC={SSHC}
-        totalIndex={totalIndex}
-      />
       <SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
     </>
   );

src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx

@@ -46,7 +46,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",
@@ -105,7 +105,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
             display: "flex",
             flexDirection: "column",
             gap: isMobile ? "13px" : "14px",
-            width: "100%",
+            width: isMobile ? "auto" : "100%",
           }}
         >
           <Typography
@@ -128,7 +128,10 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
           />
           <Box sx={{ display: "flex", alignItems: "center" }}>
             <CustomCheckbox
-              sx={{ width: isMobile ? "90%" : "auto", mr: isMobile ? "0px" : "16px" }}
+              sx={{
+                mr: isMobile ? "0px" : "16px",
+                height: isMobile ? "100%" : "26px",
+              }}
               label={"Внутреннее название вопроса"}
               checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
               handleChange={({ target }) => {

src/pages/Questions/OptionsPicture/OptionsPicture.tsx

@@ -53,7 +53,6 @@ export default function OptionsPicture({ totalIndex }: Props) {
     }
   };
 
-
   return (
     <>
       <Box sx={{ pl: "20px", pr: "20px" }}>
@@ -78,7 +77,15 @@ export default function OptionsPicture({ totalIndex }: Props) {
                 justifyContent: "space-between",
               }}
             >
-              <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%",
+                  maxHeight: "98px",
+                }}
+              >
                 <ImageAddIcons fontSize="22px" color="#7E2AEA" />
               </Box>
               <span
@@ -166,15 +173,8 @@ export default function OptionsPicture({ totalIndex }: Props) {
                     <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id">
                       <MessageIcon style={{ color: "#9A9AAF", fontSize: "30px", marginRight: "6.5px" }} />
                     </IconButton>
-                    <Popover
+                    <Popover id="my-popover-id" anchorOrigin={{ vertical: "bottom", horizontal: "left" }} open={false}>
-                      id="my-popover-id"
+                      <TextareaAutosize style={{ margin: "10px" }} placeholder="Подсказка для этого ответа" />
-                      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-                      open={false}
-                    >
-                      <TextareaAutosize
-                        style={{ margin: "10px" }}
-                        placeholder="Подсказка для этого ответа"
-                      />
                     </Popover>
                     <IconButton sx={{ padding: "0" }}>
                       <DeleteIcon style={{ color: theme.palette.grey2.main, marginRight: "-1px" }} />
@@ -187,7 +187,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
                   padding: "13.5px",
                   borderRadius: "10px",
                   background: "#ffffff",
-                  height: "48px",
+                  height: isMobile ? "41px" : "48px",
                 },
                 "& .MuiOutlinedInput-notchedOutline": {
                   border: "none",
@@ -207,9 +207,7 @@ export default function OptionsPicture({ totalIndex }: Props) {
                   position: "relative",
                 }}
               >
-                <Box
+                <Box sx={{ width: "100%", background: "#EEE4FC", height: "40px" }} />
-                  sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
-                />
                 <ImageAddIcons
                   style={{
                     position: "absolute",
@@ -275,15 +273,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

@@ -163,6 +163,19 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
                 }
               />
             )}
+          <CustomCheckbox
+            sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
+            label={"Большие картинки"}
+            checked={listQuestions[quizId][totalIndex].content.own}
+            handleChange={({ target }) =>
+              updateQuestionsList(quizId, totalIndex, {
+                content: {
+                  ...listQuestions[quizId][totalIndex].content,
+                  own: target.checked,
+                },
+              })
+            }
+          />
           <CustomCheckbox
             sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
             label={'Вариант "свой ответ"'}
@@ -227,6 +240,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
           </Box>
           <Typography sx={{ fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>Настройки вопросов</Typography>
           <CustomCheckbox
+            sx={{ alignItems: isMobile ? "flex-start" : "" }}
             label={"Необязательный вопрос"}
             checked={listQuestions[quizId][totalIndex].content.required}
             handleChange={({ target }) =>
@@ -246,6 +260,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP
             }}
           >
             <CustomCheckbox
+              sx={{ height: isMobile ? "100%" : "26px", alignItems: isMobile ? "flex-start" : "center" }}
               label={"Внутреннее название вопроса"}
               checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
               handleChange={({ target }) =>

src/pages/Questions/OwnTextField/OwnTextField.tsx

@@ -39,7 +39,7 @@ export default function OwnTextField({ totalIndex }: Props) {
           width: "auto",
           maxWidth: "745px",
           display: "flex",
-          pb: "15px",
+          pb: "20px",
           pl: "20px",
           pr: "20px",
           flexDirection: "column",
@@ -50,9 +50,9 @@ export default function OwnTextField({ totalIndex }: Props) {
           placeholder={"Пример ответа"}
           text={listQuestions[quizId][totalIndex].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

@@ -107,17 +107,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={listQuestions[quizId][totalIndex].content.autofill}
           handleChange={({ target }) => {
@@ -127,7 +131,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={!listQuestions[quizId][totalIndex].required}
           handleChange={(e) => {
@@ -136,9 +144,14 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
             });
           }}
         />
-        <Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
+        <Box sx={{ display: "flex", alignItems: "flex-start" }}>
           <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={listQuestions[quizId][totalIndex].content.innerNameCheck}
             handleChange={(e) => {

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -31,30 +31,34 @@ 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"}
               min={0}
               max={99}
-              value={
+              value={listQuestions[quizId][totalIndex].content.range.split("—")[0]}
-                listQuestions[quizId][totalIndex].content.range.split("—")[0]
-              }
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.range = `${target.value}—${
+                clonContent.range = `${target.value}—${listQuestions[quizId][totalIndex].content.range.split("—")[1]}`;
-                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                }`;
                 updateQuestionsList(quizId, totalIndex, {
                   content: clonContent,
                 });
@@ -62,16 +66,12 @@ export default function SliderOptions({ totalIndex }: Props) {
               onBlur={({ target }) => {
                 const start = listQuestions[quizId][totalIndex].content.start;
                 const min = Number(target.value);
-                const max = Number(
+                const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
-                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                );
 
                 if (min >= max) {
                   const clonContent = listQuestions[quizId][totalIndex].content;
                   clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${
-                    listQuestions[quizId][totalIndex].content.range.split(
+                    listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                      "—"
-                    )[1]
                   }`;
                   updateQuestionsList(quizId, totalIndex, {
                     content: clonContent,
@@ -94,14 +94,10 @@ export default function SliderOptions({ totalIndex }: Props) {
               placeholder={"100"}
               min={0}
               max={100}
-              value={
+              value={listQuestions[quizId][totalIndex].content.range.split("—")[1]}
-                listQuestions[quizId][totalIndex].content.range.split("—")[1]
-              }
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
-                clonContent.range = `${
+                clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${target.value}`;
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
-                }—${target.value}`;
                 updateQuestionsList(quizId, totalIndex, {
                   content: clonContent,
                 });
@@ -109,19 +105,15 @@ export default function SliderOptions({ totalIndex }: Props) {
               onBlur={({ target }) => {
                 const start = listQuestions[quizId][totalIndex].content.start;
                 const step = listQuestions[quizId][totalIndex].content.step;
-                const min = Number(
+                const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
-                );
                 const max = Number(target.value);
                 const range = max - min;
 
                 if (max <= min) {
                   const clonContent = listQuestions[quizId][totalIndex].content;
-                  clonContent.range = `${
+                  clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${
-                    listQuestions[quizId][totalIndex].content.range.split(
+                    min + 1 >= 100 ? 100 : min + 1
-                      "—"
+                  }`;
-                    )[0]
-                  }—${min + 1 >= 100 ? 100 : min + 1}`;
                   updateQuestionsList(quizId, totalIndex, {
                     content: clonContent,
                   });
@@ -145,11 +137,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                   });
 
                   if (range % step) {
-                    setStepError(
+                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                      `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                        max - min
-                      }`
-                    );
                   } else {
                     setStepError("");
                   }
@@ -168,18 +156,14 @@ 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
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"50"}
-              min={Number(
+              min={Number(listQuestions[quizId][totalIndex].content.range.split("—")[0])}
-                listQuestions[quizId][totalIndex].content.range.split("—")[0]
+              max={Number(listQuestions[quizId][totalIndex].content.range.split("—")[1])}
-              )}
-              max={Number(
-                listQuestions[quizId][totalIndex].content.range.split("—")[1]
-              )}
               value={String(listQuestions[quizId][totalIndex].content.start)}
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
@@ -216,12 +200,8 @@ export default function SliderOptions({ totalIndex }: Props) {
                 });
               }}
               onBlur={({ target }) => {
-                const min = Number(
+                const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]);
-                  listQuestions[quizId][totalIndex].content.range.split("—")[0]
+                const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]);
-                );
-                const max = Number(
-                  listQuestions[quizId][totalIndex].content.range.split("—")[1]
-                );
                 const range = max - min;
                 const step = Number(target.value);
 
@@ -235,11 +215,7 @@ export default function SliderOptions({ totalIndex }: Props) {
                 }
 
                 if (range % step) {
-                  setStepError(
+                  setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                    `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
-                      max - min
-                    }`
-                  );
                 } else {
                   setStepError("");
                 }
@@ -248,11 +224,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

@@ -34,19 +34,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={listQuestions[quizId][totalIndex].content.chooseRange}
           handleChange={(e) => {
@@ -64,15 +68,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={!listQuestions[quizId][totalIndex].required}
           handleChange={(e) => {
@@ -85,11 +89,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={listQuestions[quizId][totalIndex].content.innerNameCheck}
             handleChange={(e) => {

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -92,11 +92,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

@@ -15,6 +15,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 debounced = useDebouncedCallback((value) => {
@@ -86,11 +87,11 @@ export default function ResponseSettings({ totalIndex }: Props) {
         sx={{
           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%",
         }}
       >
@@ -125,14 +126,13 @@ export default function ResponseSettings({ totalIndex }: Props) {
               });
             }}
           />
-          {isMobile ||
+          {isMobile && (
-            (!isFigmaTablte && (
+            <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
-              <Tooltip title="Будет отображаться как заголовок вопроса в приходящих заявках." placement="top">
+              <Box>
-                <Box>
+                <InfoIcon />
-                  <InfoIcon />
+              </Box>
-                </Box>
+            </Tooltip>
-              </Tooltip>
+          )}
-            ))}
         </Box>
         {listQuestions[quizId][totalIndex].content.innerNameCheck && (
           <CustomTextField