diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication.tsx index f2a5ed0..16816de 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication.tsx +++ b/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} @@ -200,7 +201,7 @@ export const StartPageViewPublication = () => { flexDirection: "column" }} > - + {settings.cfg.info.clickable ? ( isMobileDevice ? ( diff --git a/lib/components/ViewPublicationPage/questions/Emoji.tsx b/lib/components/ViewPublicationPage/questions/Emoji.tsx index 0d4f838..23f42b2 100644 --- a/lib/components/ViewPublicationPage/questions/Emoji.tsx +++ b/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) => { diff --git a/lib/components/ViewPublicationPage/questions/Images.tsx b/lib/components/ViewPublicationPage/questions/Images.tsx index ff08b8f..ad76a6b 100644 --- a/lib/components/ViewPublicationPage/questions/Images.tsx +++ b/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} diff --git a/lib/components/ViewPublicationPage/questions/Variant.tsx b/lib/components/ViewPublicationPage/questions/Variant.tsx index 6d125a0..5733492 100644 --- a/lib/components/ViewPublicationPage/questions/Variant.tsx +++ b/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} diff --git a/lib/components/ViewPublicationPage/questions/Varimg.tsx b/lib/components/ViewPublicationPage/questions/Varimg.tsx index 50017eb..a22eb2f 100644 --- a/lib/components/ViewPublicationPage/questions/Varimg.tsx +++ b/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 }}>