пофиксив варианты отображение дизайна главной страницы

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -142,6 +142,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                   fontStyle: "normal",
                   fontStretch: "normal",
                   lineHeight: "1.2",
+                  overflowWrap: "break-word",
+                  width: "100%",
+                  textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
                 }}
               >
                 {quiz.name}
@@ -150,6 +153,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                 sx={{
                   fontSize: "16px",
                   m: "16px 0",
+                  overflowWrap: "break-word",
+                  width: "100%",
+                  textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
                 }}
               >
                 {quiz.config.startpage.description}
@@ -172,7 +178,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
             <Box
               sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
             >
-              <Box>
+              <Box sx={{ maxWidth: "300px" }}>
                 {quiz.config.info.clickable ? (
                   isMobileDevice ? (
                     <Link href={`tel:${quiz.config.info.phonenumber}`}>
@@ -192,7 +198,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
                     {quiz.config.info.phonenumber}
                   </Typography>
                 )}
-                <Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
+                <Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
+                  {quiz.config.info.law}
+                </Typography>
               </Box>
 
               <Box
@@ -329,7 +337,16 @@ function QuizPreviewLayoutByType({
           }}
         >
           {quizHeaderBlock}
-          {backgroundBlock && <Box>{backgroundBlock}</Box>}
+          {backgroundBlock && (
+            <Box
+              sx={{
+                width: "60%",
+                overflow: "hidden",
+              }}
+            >
+              {backgroundBlock}
+            </Box>
+          )}
           {quizMainBlock}
         </Box>
       );

src/pages/startPage/StartPageSettings.tsx

@@ -18,7 +18,7 @@ import {
   Select,
   Typography,
   useMediaQuery,
-    useTheme
+  useTheme,
 } from "@mui/material";
 import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -35,27 +35,13 @@ import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
 
-
 const designTypes = [
-    [
+  ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
-        "standard",
+  ["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
-        (color: string) => <LayoutStandartIcon color={color} />,
+  ["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
-        "Standard",
-    ],
-    [
-        "expanded",
-        (color: string) => <LayoutExpandedIcon color={color} />,
-        "Expanded",
-    ],
-    [
-        "centered",
-        (color: string) => <LayoutCenteredIcon color={color} />,
-        "Centered",
-    ],
 ] as const;
 // type DesignType = typeof designTypes[number][0];
 
-
 export default function StartPageSettings() {
   const theme = useTheme();
   const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
@@ -75,14 +61,14 @@ export default function StartPageSettings() {
   const favIconDropZoneElement = (
     <FaviconDropZone
       imageUrl={quiz.config.startpage.favIcon}
-            onImageUploadClick={async file => {
+      onImageUploadClick={async (file) => {
         const resizedImage = await resizeFavIcon(file);
         uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
           quiz.config.startpage.favIcon = url;
         });
       }}
       onDeleteClick={() => {
-                updateQuiz(quiz.id, quiz => {
+        updateQuiz(quiz.id, (quiz) => {
           quiz.config.startpage.favIcon = null;
         });
       }}
@@ -91,10 +77,7 @@ export default function StartPageSettings() {
 
   return (
     <>
-            <Typography
+      <Typography variant="h5" sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}>
-                variant="h5"
-                sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}
-            >
         Стартовая страница
       </Typography>
       {isSmallMonitor && (
@@ -105,10 +88,7 @@ export default function StartPageSettings() {
                 fontWeight: 500,
                 fontSize: "16px",
                 color: formState === "design" ? "#7E2AEA" : "#7D7E86",
-                                borderBottom:
+                borderBottom: formState === "design" ? "2px solid #7E2AEA" : "1px solid transparent",
-                                    formState === "design"
-                                        ? "2px solid #7E2AEA"
-                                        : "1px solid transparent",
               }}
             >
               Дизайн
@@ -120,10 +100,7 @@ export default function StartPageSettings() {
                 fontWeight: 500,
                 fontSize: "16px",
                 color: formState === "content" ? "#7E2AEA" : "#7D7E86",
-                                borderBottom:
+                borderBottom: formState === "content" ? "2px solid #7E2AEA" : "1px solid transparent",
-                                    formState === "content"
-                                        ? "2px solid #7E2AEA"
-                                        : "1px solid transparent",
               }}
             >
               Контент
@@ -153,8 +130,7 @@ export default function StartPageSettings() {
           <Box
             sx={{
               pr: "20px",
-                            borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main
+              borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main}`,
-                                }`,
               display: "flex",
               flexDirection: "column",
               flex: `1 1 361px`,
@@ -183,9 +159,11 @@ export default function StartPageSettings() {
                 variant="outlined"
                 value={designType}
                 displayEmpty
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.startpageType = e.target.value as QuizStartpageType;
-                                })}
+                  })
+                }
                 sx={{
                   height: "48px",
                   borderRadius: "8px",
@@ -240,11 +218,7 @@ export default function StartPageSettings() {
                       color: theme.palette.grey2.main,
                     }}
                   >
-                                        {type[1](
+                    {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
-                                            type[0] === designType
-                                                ? theme.palette.orange.main
-                                                : theme.palette.grey2.main
-                                        )}
                     {type[2]}
                   </MenuItem>
                 ))}
@@ -268,17 +242,21 @@ export default function StartPageSettings() {
             >
               <SelectableButton
                 isSelected={quiz.config.startpage.background.type === "image"}
-                                onClick={() => updateQuiz(quiz.id, quiz => {
+                onClick={() =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.startpage.background.type = "image";
-                                })}
+                  })
+                }
               >
                 Изображение
               </SelectableButton>
               <SelectableButton
                 isSelected={quiz.config.startpage.background.type === "video"}
-                                onClick={() => updateQuiz(quiz.id, quiz => {
+                onClick={() =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.startpage.background.type = "video";
-                                })}
+                  })
+                }
               >
                 Видео
               </SelectableButton>
@@ -311,19 +289,19 @@ export default function StartPageSettings() {
                   sx={{ maxWidth: "300px" }}
                   imageUrl={quiz.config.startpage.background.desktop}
                   originalImageUrl={quiz.config.startpage.background.originalDesktop}
-                                    onImageUploadClick={file => {
+                  onImageUploadClick={(file) => {
                     uploadQuizImage(quiz.id, file, (quiz, url) => {
                       quiz.config.startpage.background.desktop = url;
                       quiz.config.startpage.background.originalDesktop = url;
                     });
                   }}
-                                    onImageSaveClick={file => {
+                  onImageSaveClick={(file) => {
                     uploadQuizImage(quiz.id, file, (quiz, url) => {
                       quiz.config.startpage.background.desktop = url;
                     });
                   }}
                   onDeleteClick={() => {
-                                        updateQuiz(quiz.id, quiz => {
+                    updateQuiz(quiz.id, (quiz) => {
                       quiz.config.startpage.background.desktop = null;
                     });
                   }}
@@ -331,8 +309,6 @@ export default function StartPageSettings() {
               </Box>
 
               <ModalSizeImage />
-
-                           
             </Box>
 
             <Box
@@ -345,14 +321,15 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="URL видео"
                 text={quiz.config.startpage.background.video ?? ""}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.startpage.background.video = e.target.value;
-                                })}
+                  })
+                }
               />
-                            
             </Box>
 
-                        {designType !== "centered" &&
+            {designType !== "centered" && (
               <>
                 <Typography
                   sx={{
@@ -371,31 +348,36 @@ export default function StartPageSettings() {
                   }}
                 >
                   <SelectableIconButton
-                                        onClick={() => updateQuiz(quiz.id, quiz => {
+                    onClick={() =>
+                      updateQuiz(quiz.id, (quiz) => {
                         quiz.config.startpage.position = "left";
-                                        })}
+                      })
+                    }
                     isActive={quiz.config.startpage.position === "left"}
                     Icon={AlignLeftIcon}
                   />
                   <SelectableIconButton
-                                        onClick={() => updateQuiz(quiz.id, quiz => {
+                    onClick={() =>
+                      updateQuiz(quiz.id, (quiz) => {
                         quiz.config.startpage.position = "center";
-                                        })}
+                      })
+                    }
                     isActive={quiz.config.startpage.position === "center"}
                     Icon={AlignCenterIcon}
                     sx={{ display: designType === "standard" ? "none" : "flex" }}
                   />
                   <SelectableIconButton
-                                        onClick={() => updateQuiz(quiz.id, quiz => {
+                    onClick={() =>
+                      updateQuiz(quiz.id, (quiz) => {
                         quiz.config.startpage.position = "right";
-                                        })}
+                      })
+                    }
                     isActive={quiz.config.startpage.position === "right"}
                     Icon={AlignRightIcon}
                   />
                 </Box>
               </>
-
+            )}
-                        }
             {(isTablet || !isSmallMonitor) && (
               <>
                 <Box
@@ -418,19 +400,19 @@ export default function StartPageSettings() {
                     sx={{ maxWidth: "300px" }}
                     imageUrl={quiz.config.startpage.logo}
                     originalImageUrl={quiz.config.startpage.originalLogo}
-                                        onImageUploadClick={file => {
+                    onImageUploadClick={(file) => {
                       uploadQuizImage(quiz.id, file, (quiz, url) => {
                         quiz.config.startpage.logo = url;
                         quiz.config.startpage.originalLogo = url;
                       });
                     }}
-                                        onImageSaveClick={file => {
+                    onImageSaveClick={(file) => {
                       uploadQuizImage(quiz.id, file, (quiz, url) => {
                         quiz.config.startpage.logo = url;
                       });
                     }}
                     onDeleteClick={() => {
-                                            updateQuiz(quiz.id, quiz => {
+                      updateQuiz(quiz.id, (quiz) => {
                         quiz.config.startpage.logo = null;
                       });
                     }}
@@ -482,19 +464,19 @@ export default function StartPageSettings() {
                   sx={{ maxWidth: "300px" }}
                   imageUrl={quiz.config.startpage.logo}
                   originalImageUrl={quiz.config.startpage.originalLogo}
-                                    onImageUploadClick={file => {
+                  onImageUploadClick={(file) => {
                     uploadQuizImage(quiz.id, file, (quiz, url) => {
                       quiz.config.startpage.logo = url;
                       quiz.config.startpage.originalLogo = url;
                     });
                   }}
-                                    onImageSaveClick={file => {
+                  onImageSaveClick={(file) => {
                     uploadQuizImage(quiz.id, file, (quiz, url) => {
                       quiz.config.startpage.logo = url;
                     });
                   }}
                   onDeleteClick={() => {
-                                        updateQuiz(quiz.id, quiz => {
+                    updateQuiz(quiz.id, (quiz) => {
                       quiz.config.startpage.logo = null;
                     });
                   }}
@@ -528,9 +510,12 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="Имя заголовка об опроснике для подбора табуретки"
                 text={quiz.name}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.name = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={40}
               />
               <Typography
                 sx={{
@@ -545,9 +530,12 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="Внимательно заполняйте поля ответов"
                 text={quiz.config.startpage.description}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.startpage.description = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={70}
               />
               <Typography
                 sx={{
@@ -562,9 +550,12 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="Начать опрос"
                 text={quiz.config.startpage.button}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.startpage.button = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={15}
               />
               <Typography
                 sx={{
@@ -579,17 +570,22 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="8-800-000-00-00"
                 text={quiz.config.info.phonenumber}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.info.phonenumber = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={20}
               />
               <CustomCheckbox
                 sx={{ margin: "10px 0" }}
                 label="Кликабельный"
                 checked={quiz.config.info.clickable}
-                                handleChange={e => updateQuiz(quiz.id, quiz => {
+                handleChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.info.clickable = e.target.checked;
-                                })}
+                  })
+                }
               />
               <Typography
                 sx={{
@@ -604,9 +600,12 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="Только лучшее"
                 text={quiz.config.info.orgname}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.info.orgname = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={25}
               />
               <Typography
                 sx={{
@@ -621,9 +620,12 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="https://mysite.com"
                 text={quiz.config.info.site}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.info.site = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={25}
               />
               <Typography
                 sx={{
@@ -638,9 +640,12 @@ export default function StartPageSettings() {
               <CustomTextField
                 placeholder="Данные наших документов"
                 text={quiz.config.info.law}
-                                onChange={e => updateQuiz(quiz.id, quiz => {
+                onChange={(e) =>
+                  updateQuiz(quiz.id, (quiz) => {
                     quiz.config.info.law = e.target.value;
-                                })}
+                  })
+                }
+                maxLength={45}
               />
               <Extra />
             </>
@@ -663,7 +668,7 @@ export default function StartPageSettings() {
                 textUnderlineOffset: "2px",
               }}
             >
-                            <ArrowLeft right={false}/> Вернуться к дизайну
+              <ArrowLeft right={false} /> Вернуться к дизайну
             </Button>
           )}
           {formState === "design" && (
@@ -681,7 +686,7 @@ export default function StartPageSettings() {
                 textUnderlineOffset: "2px",
               }}
             >
-                            Далее заполнить контент <ArrowLeft right={true}/>
+              Далее заполнить контент <ArrowLeft right={true} />
             </Button>
           )}
         </Box>
@@ -694,7 +699,7 @@ export default function StartPageSettings() {
           justifyContent: "flex-end",
           flexDirection: isTablet ? "column" : "row",
           marginTop: "30px",
-                    marginBottom: isTablet ? "90px" : undefined
+          marginBottom: isTablet ? "90px" : undefined,
         }}
       >
         <FormControlLabel
@@ -726,9 +731,11 @@ export default function StartPageSettings() {
                 borderRadius: 0,
                 padding: 0,
               }}
-                            onChange={e => updateQuiz(quiz.id, quiz => {
+              onChange={(e) =>
+                updateQuiz(quiz.id, (quiz) => {
                   quiz.config.noStartPage = e.target.checked;
-                            })}
+                })
+              }
               checked={quiz.config.noStartPage}
             />
           }
@@ -740,11 +747,7 @@ export default function StartPageSettings() {
             justifyContent: "flex-end",
           }}
         />
-                <Button
+        <Button variant="contained" data-cy="setup-questions" onClick={incrementCurrentStep}>
-                    variant="contained"
-                    data-cy="setup-questions"
-                    onClick={incrementCurrentStep}
-                >
           Настроить вопросы
         </Button>
       </Box>

src/ui_kit/CustomTextField.tsx

@@ -1,7 +1,7 @@
-import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
+import React, { useState } from "react";
-
+import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material";
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
-import type { InputProps } from "@mui/material";
+import type { InputProps, SxProps, Theme } from "@mui/material";
 
 interface CustomTextFieldProps {
   placeholder: string;
@@ -11,6 +11,7 @@ interface CustomTextFieldProps {
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
   text?: string;
+  maxLength?: number;
   sx?: SxProps<Theme>;
   InputProps?: Partial<InputProps>;
 }
@@ -18,28 +19,54 @@ interface CustomTextFieldProps {
 export default function CustomTextField({
   placeholder,
   value,
-  text,
-  sx,
-  error,
   onChange,
   onKeyDown,
   onBlur,
+  text,
+  sx,
+  error,
   InputProps,
+  maxLength = 200,
 }: CustomTextFieldProps) {
   const theme = useTheme();
 
+  const [inputValue, setInputValue] = useState(value || "");
+  const [isInputActive, setIsInputActive] = useState(false);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    setInputValue(inputValue);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  const handleInputFocus = () => {
+    setIsInputActive(true);
+  };
+
+  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setIsInputActive(false);
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
   return (
     <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
       <TextField
         defaultValue={text}
         fullWidth
-        value={value}
+        value={inputValue}
         placeholder={placeholder}
+        onChange={handleInputChange}
         error={!!error}
         label={error}
-        onChange={onChange}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
         onKeyDown={onKeyDown}
-        onBlur={onBlur}
         sx={{
           "& .MuiInputBase-root": {
             backgroundColor: theme.palette.background.default,
@@ -50,19 +77,36 @@ export default function CustomTextField({
             fontSize: "13.5px",
             marginTop: "3px",
           },
-          ...sx,
         }}
         InputProps={InputProps}
         inputProps={{
+          maxLength: maxLength,
           sx: {
             borderRadius: "10px",
             fontSize: "18px",
             lineHeight: "21px",
             py: 0,
           },
+          ...sx,
         }}
         data-cy="textfield"
       />
+      {isInputActive && inputValue.length >= maxLength - 7 && (
+        <Box
+          sx={{
+            display: "flex",
+            marginTop: "5px",
+            marginLeft: "auto",
+            position: "absolute",
+            bottom: "-25px",
+            right: "0",
+          }}
+        >
+          <Typography fontSize="14px">{inputValue.length}</Typography>
+          <span>/</span>
+          <Typography fontSize="14px">{maxLength}</Typography>
+        </Box>
+      )}
     </FormControl>
   );
 }