расширение блоков и перенос слов при длинных ответах

src/pages/ViewPublicationPage/questions/Emoji.tsx

@@ -152,7 +152,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                   }
                   label={
                     <Box sx={{ display: "flex", gap: "10px" }}>
-                      <Typography>{variant.answer}</Typography>
+                      <Typography sx={{wordBreak: "break-word"}}>{variant.answer}</Typography>
                     </Box>
                   }
                 />

src/pages/ViewPublicationPage/questions/File.tsx

@@ -3,7 +3,7 @@ import {
     Typography,
     ButtonBase,
     useTheme,
-  IconButton,
+    IconButton, useMediaQuery,
 } from "@mui/material";
 import { useQuizViewStore, updateAnswer } from "@root/quizView/store";
 import { UPLOAD_FILE_TYPES_MAP } from "../tools/File";
@@ -47,6 +47,7 @@ export const File = ({ currentQuestion }: FileProps) => {
     ({ questionId }) => questionId === currentQuestion.id
   )?.answer as string;
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(500));
   const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
     const file = target.files?.[0];
     if (file) {
@@ -98,10 +99,18 @@ export const File = ({ currentQuestion }: FileProps) => {
                 color: "#FFFFFF",
                 display: "flex",
                 alignItems: "center",
+                overflow: "hidden",
                 gap: "15px",
               }}
             >
-              <Typography>{answer?.split("|")[0]}</Typography>
+              <Typography
+                  sx={{
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                      overflow: "hidden",
+                  }}
+              >
+                  {answer?.split("|")[0]}</Typography>
               <IconButton
                 sx={{ p: 0 }}
                 onClick={() => {
@@ -129,7 +138,7 @@ export const File = ({ currentQuestion }: FileProps) => {
               }
               sx={{
                 width: "100%",
-                height: "120px",
+                height: isMobile ? undefined : "120px",
                 display: "flex",
                 gap: "50px",
                 justifyContent: "flex-start",

src/pages/ViewPublicationPage/questions/Images.tsx

@@ -127,10 +127,14 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
               <FormControlLabel
                 key={variant.id}
                 sx={{
-                  display: "block",
                   textAlign: "center",
                   color: theme.palette.text.primary,
                   marginTop: "10px",
+                  marginLeft: 0,
+                  padding: "10px",
+                  "& .MuiFormControlLabel-label": {
+                      wordBreak: "break-word",
+                  },
                 }}
                 value={index}
                 control={

src/pages/ViewPublicationPage/questions/Variant.tsx

@@ -158,6 +158,9 @@ const VariantItem = ({
         "&.MuiFormControl-root": {
           width: "100%",
         },
+        "& .MuiFormControlLabel-label": {
+          wordBreak: "break-word"
+        }
       }}
       value={index}
       labelPlacement="start"

src/pages/ViewPublicationPage/questions/Varimg.tsx

@@ -75,6 +75,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                   borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
                   display: "flex",
                   margin: isMobile ? 0 : undefined,
+                  "& .MuiFormControlLabel-label": {
+                      wordBreak: "break-word"
+                  }
                 }}
                 value={index}
                 onClick={async(event) => {