fix: quize result page

src/pages/Result/CreationFullCard.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 
 type Props = {
   text: string;
@@ -7,14 +7,20 @@ type Props = {
 };
 
 export default function CreationFullCard({ text, text2, image }: Props) {
+  const theme = useTheme();
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
+
   return (
     <Box
       sx={{
         flexGrow: 1,
         backgroundColor: "white",
         p: "20px",
+        marginTop: "50px",
         borderRadius: "12px",
-        display: "flex",
+        display: isSmallMonitor ? "block" : "flex",
+        flexDirection: isSmallMonitor ? "column" : "row",
+        gap: "20px",
         boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                    0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                    0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
@@ -23,36 +29,46 @@ export default function CreationFullCard({ text, text2, image }: Props) {
                    0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
       }}
     >
-      <Box sx={{ mr: "104px", position: "relative" }}>
+      <Box
-        <Typography variant="h5">Результаты квиза в зависимости от ответов</Typography>
+        sx={{
-        <Typography
+          mr: !isSmallMonitor ? "104px" : 0,
+          marginBottom: "20px",
+          position: "relative",
+        }}
+      >
+        <Typography variant="h5" sx={{ marginBottom: "20px" }}>
+          Результаты квиза в зависимости от ответов
+        </Typography>
+        <Box
           sx={{
-            color: "#4D4D4D",
+            display: "flex",
-            mt: "20px",
+            flexDirection: "column",
-            mb: "33px",
+            justifyContent: "space-between",
-            width: "95%",
+            height: "100%",
+            maxHeight: isSmallMonitor ? "none" : "220px",
+            gap: "25px",
           }}
         >
-          {text}
+          <Typography sx={{ color: "#4D4D4D", width: "95%" }}>
-        </Typography>
+            {text}
-        <Typography
+          </Typography>
-          sx={{
+          <Typography
-            color: "#9A9AAF",
+            sx={{
-            width: "100%",
+              color: "#9A9AAF",
-            position: "absolute",
+              width: "100%",
-            bottom: 0,
+            }}
-          }}
+          >
-        >
+            {text2}
-          {text2}
+          </Typography>
-        </Typography>
+        </Box>
       </Box>
       <img
         src={image}
         alt="quiz creation"
         style={{
           display: "block",
-          width: "520px",
+          width: isSmallMonitor ? "100%" : "auto",
-          height: "270xp",
+          maxHeight: isSmallMonitor ? "none" : "270px",
         }}
       />
     </Box>

src/pages/Result/Result.tsx

@@ -1,5 +1,5 @@
-import { Link, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
-import { Box, Button, useTheme } from "@mui/material";
+import { Box, Button, Tooltip, useTheme } from "@mui/material";
 import CreationFullCard from "./CreationFullCard";
 
 import Info from "../../assets/icons/Info";
@@ -21,19 +21,19 @@ export const Result = () => {
         text2="Этот шаг - необязательный, квиз будет работать и без автоматических результатов."
         image={image}
       />
-      <Box sx={{ mt: "30px", alignItems: "center" }}>
+      <Box sx={{ display: "flex", mt: "30px", alignItems: "center" }}>
         <Button
           variant="contained"
-          sx={{
+          sx={{ mr: "15px", minWidth: "258px" }}
-            mr: "23px",
-            minWidth: "258px",
-          }}
           onClick={handleNext}
         >
           Создать результаты
         </Button>
-
+        <Tooltip title="Посмотреть справку" placement="top">
-        <Info />
+          <Box>
+            <Info />
+          </Box>
+        </Tooltip>
       </Box>
     </Box>
   );