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

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/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>
   );
 }