перенос заголовков при переполнении

This commit is contained in:
Tamara 2024-02-15 04:20:35 +03:00
parent 63b28e0f03
commit 051e9ee4ac
14 changed files with 18 additions and 15 deletions

@ -180,6 +180,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
m: "20px 0",
fontSize: "28px",
color: theme.palette.text.primary,
wordBreak: "break-word"
}}
>
{settings.cfg.formContact.title ||
@ -192,6 +193,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
textAlign: "center",
m: "20px 0",
fontSize: "18px",
wordBreak: "break-word"
}}
>
{settings.cfg.formContact.desc}

@ -27,7 +27,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>
{currentQuestion.title}
</Typography>
<Box

@ -34,7 +34,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(

@ -184,7 +184,7 @@ export const File = ({ currentQuestion }: FileProps) => {
return (
<>
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box
sx={{
display: "flex",

@ -31,7 +31,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<RadioGroup
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(

@ -353,7 +353,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>
{currentQuestion.title}
</Typography>
<Box

@ -12,8 +12,8 @@ export const Page = ({ currentQuestion }: PageProps) => {
return (
<Box>
<Typography variant="h5" sx={{ paddingBottom: "25px", color: theme.palette.text.primary }}>{currentQuestion.title}</Typography>
<Typography color={theme.palette.text.primary}>{currentQuestion.content.text}</Typography>
<Typography variant="h5" sx={{ paddingBottom: "25px", color: theme.palette.text.primary }} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Typography color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.content.text}</Typography>
<Box
sx={{
display: "flex",

@ -71,7 +71,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box
sx={{
display: "inline-flex",

@ -24,7 +24,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box
sx={{
display: "flex",

@ -37,7 +37,7 @@ export const Text = ({ currentQuestion }: TextProps) => {
}, 400);
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box
sx={{
display: "flex",

@ -68,7 +68,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box sx={{ display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined}}>
<Group

@ -39,7 +39,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box sx={{
display: "flex",
marginTop: "20px",

@ -135,7 +135,8 @@ export const Select = ({
padding: "10px",
borderRadius: "5px",
color: colorPlaceholder,
whiteSpace: "normal"
whiteSpace: "normal",
wordBreak: "break-word"
}}
>
{item}

@ -8,8 +8,8 @@ import useSWR from "swr";
import QuizAnswerer from "../lib/components/QuizAnswerer";
import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
//const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //looooong header
//const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
const defaultQuizId = "d7c940fe-1e44-41a0-bbac-5f304c51a1e4"; //looooong header
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
export default function App() {