diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx index aa723b0..d8b82b3 100644 --- a/src/pages/ViewPublicationPage/questions/Emoji.tsx +++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx @@ -152,7 +152,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => { } label={ - {variant.answer} + {variant.answer} } /> diff --git a/src/pages/ViewPublicationPage/questions/File.tsx b/src/pages/ViewPublicationPage/questions/File.tsx index a625d7b..d2922bd 100644 --- a/src/pages/ViewPublicationPage/questions/File.tsx +++ b/src/pages/ViewPublicationPage/questions/File.tsx @@ -1,9 +1,9 @@ import { - Box, - Typography, - ButtonBase, - useTheme, - IconButton, + Box, + Typography, + ButtonBase, + useTheme, + 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) => { 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", }} > - {answer?.split("|")[0]} + + {answer?.split("|")[0]} { @@ -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", diff --git a/src/pages/ViewPublicationPage/questions/Images.tsx b/src/pages/ViewPublicationPage/questions/Images.tsx index 45562f7..0ecb933 100644 --- a/src/pages/ViewPublicationPage/questions/Images.tsx +++ b/src/pages/ViewPublicationPage/questions/Images.tsx @@ -127,10 +127,14 @@ export const Images = ({ currentQuestion }: ImagesProps) => { { 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) => {