Merge branch 'fix-bag-visual' into dev

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -74,6 +74,7 @@ export default function InstallQuiz() {
 
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
   const CopyLink = () => {
     let one = document.getElementById("inputLinkone").value;
     let text = document.getElementById("inputLink").value;
@@ -295,9 +296,9 @@ export default function InstallQuiz() {
           <Box
             sx={{
               display: "flex",
-              alignItems: isMobile ? "flex-start" : "center",
+              alignItems: isSmallMonitor ? "flex-start" : "center",
               gap: "30px",
-              flexDirection: isMobile ? "column" : "row",
+              flexDirection: isSmallMonitor ? "column" : "row",
             }}
           >
             <Typography variant="h5" sx={{ paddingRight: "30px" }}>

src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx

@@ -39,6 +39,7 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 export default function BranchingQuestions() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
+  const isSmallMobile = useMediaQuery(theme.breakpoints.down(400));
   const { openedModalSettingsId } = useUiTools();
   const [targetQuestion, setTargetQuestion] =
     useState<AnyTypedQuizQuestion | null>(
@@ -119,7 +120,23 @@ export default function BranchingQuestions() {
               }}
             >
               <Box sx={{ color: "#4d4d4d" }}>
-                <Typography component="span">{targetQuestion.title}</Typography>
+                <Typography
+                  component="span"
+                  sx={{
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    maxWidth: isSmallMobile
+                      ? "250px"
+                      : isMobile
+                        ? "350px"
+                        : "450px",
+                    display: "inline-block",
+                    width: "100%",
+                  }}
+                >
+                  {targetQuestion.title}
+                </Typography>
               </Box>
               {isMobile ? (
                 <TooltipClickInfo

src/pages/QuizAnswersPage/QuizAnswersPage.tsx

@@ -128,9 +128,9 @@ export const QuizAnswersPage: FC = () => {
 
   return (
     <Box>
-      <HeaderFull isRequest={true} />
+      <HeaderFull isRequest={true} sx={{ position: "fixed", zIndex: 9 }} />
       <SectionWrapper
-        sx={{ padding: isMobile ? "0 16px" : "20px" }}
+        sx={{ padding: isMobile ? "115px 16px" : "115px 20px 20px" }}
         maxWidth="lg"
       >
         <Typography
@@ -138,8 +138,9 @@ export const QuizAnswersPage: FC = () => {
             fontSize: "36px",
             fontWeight: "500",
             mb: "50px",
-            mt: "60px",
+
             lineHeight: "normal",
+            wordBreak: "break-word",
           }}
         >
           {quiz.name}

src/ui_kit/Header/HeaderFull.tsx

@@ -5,6 +5,8 @@ import {
   Typography,
   useTheme,
   useMediaQuery,
+  SxProps,
+  Theme,
 } from "@mui/material";
 import NavMenuItem from "./NavMenuItem";
 import Logotip from "../../pages/Landing/images/icons/QuizLogo";
@@ -21,7 +23,12 @@ import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton";
 import ArrowLeft from "@icons/questionsPage/arrowLeft";
 import { cleanAuthTicketData } from "@root/ticket";
 
-export default function HeaderFull({ isRequest }: boolean) {
+interface Props {
+  isRequest: boolean;
+  sx?: SxProps<Theme>;
+}
+
+export default function HeaderFull({ isRequest, sx }: Props) {
   const theme = useTheme();
   const navigate = useNavigate();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
@@ -55,6 +62,7 @@ export default function HeaderFull({ isRequest }: boolean) {
         justifyContent: isMobile ? "space-between" : "center",
         bgcolor: "white",
         borderBottom: "1px solid #E3E3E3",
+        ...sx,
       }}
     >
       <Link to="/">

src/ui_kit/Sidebar/Sidebar.tsx

@@ -81,7 +81,7 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
               color: theme.palette.grey2.main,
             }}
           >
-            Создание quiz
+            {`Создание ${quiz.config.type}`}
           </Typography>
         )}
         {!disableCollapse && (
@@ -145,7 +145,7 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
             color: theme.palette.grey2.main,
           }}
         >
-          Настройки quiz
+          {`Настройки ${quiz.config.type}`}
         </Typography>
       )}
       <List disablePadding>

src/ui_kit/Sidebar/SidebarMobile.tsx

@@ -148,7 +148,7 @@ export const SidebarMobile: FC<Iprops> = ({
           sx={{
             ml: "15px",
             display: "flex",
-            alignItems: "end",
+            alignItems: "center",
             width: "100%",
             justifyContent: "space-between",
           }}
@@ -174,7 +174,7 @@ export const SidebarMobile: FC<Iprops> = ({
                   id="project-name"
                   placeholder="Название проекта"
                   sx={{
-                    width: "270px",
+                    width: "85%",
                     "& .MuiInputBase-root": {
                       height: "34px",
                       borderRadius: "8px",
@@ -202,7 +202,7 @@ export const SidebarMobile: FC<Iprops> = ({
               </Typography>
             )}
           </Box>
-          <IconButton onClick={() => setInputOpen(true)}>
+          <IconButton onClick={() => setInputOpen(true)} sx={{ mt: "10px" }}>
             <Pencil
               style={{
                 position: "absolute",