селекты красиво скрывают переполнение, цвета текста на превью и тень, скрытие скроллбара во всем проекте

src/index.css

@@ -6,6 +6,14 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+/*скрывает все скролл-бары*/
+body * {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+body * ::-webkit-scrollbar {
+  display: none;
+}
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",

src/pages/Questions/Select.tsx

@@ -116,10 +116,10 @@ export const Select = ({
         inputProps={{
           sx: {
             color: colorMain,
-            display: "flex",
-            alignItems: "center",
+            display: "block",
             px: "9px",
             gap: "20px",
+            width: "90%",
           },
         }}
         IconComponent={(props) => <ArrowDown {...props} />}
@@ -135,6 +135,7 @@ export const Select = ({
               padding: "10px",
               borderRadius: "5px",
               color: colorPlaceholder,
+              whiteSpace: "normal",
             }}
           >
             {item}

src/ui_kit/QuizPreview/QuizPreview.tsx

@@ -116,6 +116,7 @@ export default function QuizPreview() {
             style={{
               overflow: "hidden",
               pointerEvents: "auto",
+              boxShadow: "0px 5px 10px 2px rgba(34, 60, 80, 0.2)",
             }}
             cancel=".cancel"
           >

src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

@@ -165,12 +165,12 @@ export default function QuizPreviewLayout() {
               inputProps={{
                 sx: {
                   color: theme.palette.primary.main,
-                  display: "flex",
-                  alignItems: "center",
+                  display: "block",
                   px: "9px",
                   gap: "20px",
-                  width: "90%",
-                  paddingRight: 0
+                  width: "87%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
                 },
               }}
               IconComponent={ArrowDownTheme}
@@ -188,7 +188,7 @@ export default function QuizPreviewLayout() {
                       borderRadius: "5px",
                       color: "#9A9AAF",
                       wordBreak: "break-word",
-                      whiteSpace: "pre-wrap",
+                      whiteSpace: "normal",
                     }}
                   >
                     {`${index + 1}. ${title}`}

src/ui_kit/QuizPreview/QuizPreviewQuestionTypes/Select.tsx

@@ -80,6 +80,7 @@ export default function Text({ question }: Props) {
                 display: "flex",
                 flexDirection: "column",
                 gap: "8px",
+                maxWidth: "330px",
                 "& .Mui-selected": {
                   backgroundColor: theme.palette.background.default,
                   color: theme.palette.primary.main,
@@ -90,12 +91,12 @@ export default function Text({ question }: Props) {
           inputProps={{
             sx: {
               color: theme.palette.primary.main,
-              display: "flex",
-              alignItems: "center",
+              display: "block",
               px: "9px",
               gap: "20px",
-              width: "90%",
               paddingLeft: "10px",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
               "& + input": !selectValue && {
                 backgroundColor: theme.palette.background.default,
                 border: "none",
@@ -107,7 +108,7 @@ export default function Text({ question }: Props) {
                 overflow: "hidden",
                 textOverflow: "ellipsis",
                 paddingLeft: "10px",
-                width: "90%",
+                width: "88%",
               },
             },
           }}
@@ -127,6 +128,7 @@ export default function Text({ question }: Props) {
                   p: "4px",
                   borderRadius: "5px",
                   color: "#9A9AAF",
+                  whiteSpace: "normal",
                 }}
               >
                 {variant.answer}

src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx

@@ -22,6 +22,7 @@ export default function QuizPreviewLayout() {
   const quiz = useCurrentQuiz();
   const mode = modes;
   const { isMobileDevice } = useUADevice();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
 
   if (!quiz) return null;
 
@@ -84,7 +85,15 @@ export default function QuizPreviewLayout() {
                   alt=""
                 />
               )}
-              <Typography sx={{ fontSize: "12px" }}>
+              <Typography
+                sx={{
+                  fontSize: "12px",
+                  color:
+                    quiz.config.startpageType === "expanded" && !isMobile
+                      ? "white"
+                      : theme.palette.text.primary,
+                }}
+              >
                 {quiz.config.info.orgname}
               </Typography>
             </Box>
@@ -105,8 +114,26 @@ export default function QuizPreviewLayout() {
                     : "start",
               }}
             >
-              <Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
-              <Typography sx={{ fontSize: "12px" }}>
+              <Typography
+                sx={{
+                  fontWeight: "bold",
+                  color:
+                    quiz.config.startpageType === "expanded" && !isMobile
+                      ? "white"
+                      : theme.palette.text.primary,
+                }}
+              >
+                {quiz.name}
+              </Typography>
+              <Typography
+                sx={{
+                  fontSize: "12px",
+                  color:
+                    quiz.config.startpageType === "expanded" && !isMobile
+                      ? "white"
+                      : theme.palette.text.primary,
+                }}
+              >
                 {quiz.config.startpage.description}
               </Typography>
               <Box>
@@ -150,12 +177,26 @@ export default function QuizPreviewLayout() {
                 )
               ) : (
                 <Typography
-                  sx={{ fontSize: "16px", color: theme.palette.primary.main }}
+                  sx={{
+                    fontSize: "16px",
+                    color:
+                      quiz.config.startpageType === "expanded" && !isMobile
+                        ? "white"
+                        : theme.palette.text.primary,
+                  }}
                 >
                   {quiz.config.info.phonenumber}
                 </Typography>
               )}
-              <Typography sx={{ fontSize: "12px" }}>
+              <Typography
+                sx={{
+                  fontSize: "12px",
+                  color:
+                    quiz.config.startpageType === "expanded" && !isMobile
+                      ? "white"
+                      : theme.palette.text.primary,
+                }}
+              >
                 {quiz.config.info.law}
               </Typography>
             </Box>

src/ui_kit/StartPagePreview/index.tsx

@@ -123,6 +123,7 @@ export const StartPagePreview = () => {
               overflow: "hidden",
               pointerEvents: "auto",
               borderRadius: "5px",
+              backgroundColor: theme.palette.background.default,
               boxShadow: "0px 5px 10px 2px rgba(34, 60, 80, 0.2)",
             }}
           >