красивое переполнение в ответах

lib/components/ViewPublicationPage/StartPageViewPublication.tsx

@@ -16,6 +16,7 @@ export const StartPageViewPublication = () => {
     const { settings } = useQuizData();
     const { isMobileDevice } = useUADevice();
     const isMobile = useRootContainerSize() < 650;
+    const isTablet = useRootContainerSize() < 800;
 
     const handleCopyNumber = () => {
         navigator.clipboard.writeText(settings.cfg.info.phonenumber);
@@ -123,7 +124,7 @@ export const StartPageViewPublication = () => {
                                     overflow: "hidden",
                                     textOverflow: "ellipsis",
                                     whiteSpace: "nowrap",
-                                    maxWidth: "300px"
+                                    maxWidth: isTablet ? "200px" : "300px"
                                 }}>
                                 {settings.cfg.info.site}
                             </Typography>
@@ -200,7 +201,7 @@ export const StartPageViewPublication = () => {
                                 flexDirection: "column"
                             }}
                         >
-                            <Box sx={{ maxWidth: "300px" }}>
+                            <Box sx={{ maxWidth: isTablet ? "240px" : "300px" }}>
                                 {settings.cfg.info.clickable ? (
                                     isMobileDevice ? (
                                         <Link href={`tel:${settings.cfg.info.phonenumber}`}>

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -100,6 +100,16 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                     color: theme.palette.text.primary,
                                     display: "flex",
                                     gap: "10px",
+                                    alignItems:
+                                        variant.answer.length <= 60 ? "center" : "flex-start",
+                                    position: "relative",
+                                    height: "80px",
+                                    "& .MuiFormControlLabel-label": {
+                                        wordBreak: "break-word",
+                                        height: variant.answer.length <= 60 ? undefined : "60px",
+                                        overflow: "auto",
+                                        paddingLeft: "45px",
+                                    },
                                 }}
                                 value={index}
                                 onClick={async (event) => {

lib/components/ViewPublicationPage/questions/Images.tsx

@@ -128,8 +128,16 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                     marginTop: "10px",
                                     marginLeft: 0,
                                     padding: "10px",
+                                    display: "flex",
+                                    alignItems:
+                                        variant.answer.length <= 60 ? "center" : "flex-start",
+                                    position: "relative",
+                                    height: "80px",
                                     "& .MuiFormControlLabel-label": {
                                         wordBreak: "break-word",
+                                        height: variant.answer.length <= 60 ? undefined : "60px",
+                                        overflow: "auto",
+                                        paddingLeft: "45px",
                                     },
                                 }}
                                 value={index}

lib/components/ViewPublicationPage/questions/Variant.tsx

@@ -166,7 +166,9 @@ const VariantItem = ({
                     width: "100%",
                 },
                 "& .MuiFormControlLabel-label": {
-                    wordBreak: "break-word"
+                    wordBreak: "break-word",
+                    height: variant.answer.length <= 60 ? undefined : "60px",
+                    overflow: "auto",
                 }
             }}
             value={index}

lib/components/ViewPublicationPage/questions/Varimg.tsx

@@ -46,7 +46,8 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                 display: "flex",
                 marginTop: "20px",
                 flexDirection: isMobile ? "column-reverse" : undefined,
-                gap: isMobile ? "30px" : undefined
+                gap: isMobile ? "30px" : undefined,
+                alignItems: isMobile ? "center" : undefined
 
             }}>
                 <RadioGroup