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) => {