fix: ButtonsOptionsForm

src/pages/Result/DescriptionForm/ButtinsOptionsForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, IconButton, useTheme } from "@mui/material";
+import { Box, IconButton, useTheme, useMediaQuery } from "@mui/material";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import SettingIcon from "@icons/questionsPage/settingIcon";
 import Branching from "@icons/questionsPage/branching";
@@ -15,20 +15,39 @@ interface Props {
 
 export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
   const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.down(800));
 
   const buttonSetting: { icon: JSX.Element; title: string; value: string }[] = [
     {
-      icon: <SettingIcon color={switchState === "setting" ? "#ffffff" : theme.palette.grey3.main} />,
+      icon: (
+        <SettingIcon
+          color={
+            switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
+          }
+        />
+      ),
       title: "Настройки",
       value: "setting",
     },
     {
-      icon: <Branching color={switchState === "branching" ? "#ffffff" : theme.palette.grey3.main} />,
+      icon: (
+        <Branching
+          color={
+            switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
+          }
+        />
+      ),
       title: "Ветвление",
       value: "branching",
     },
     {
-      icon: <StarIconPoints color={switchState === "points" ? "#ffffff" : theme.palette.grey3.main} />,
+      icon: (
+        <StarIconPoints
+          color={
+            switchState === "points" ? "#ffffff" : theme.palette.grey3.main
+          }
+        />
+      ),
       title: "Баллы",
       value: "points",
     },
@@ -47,6 +66,7 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
         sx={{
           padding: "20px",
           display: "flex",
+          flexWrap: "wrap",
           gap: "10px",
         }}
       >
@@ -57,18 +77,23 @@ export default function ButtonsOptionsForm({ SSHC, switchState }: Props) {
               SSHC(value);
             }}
             sx={{
-              backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
+              backgroundColor:
-              color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
+                switchState === value
+                  ? theme.palette.brightPurple.main
+                  : "transparent",
+              color:
+                switchState === value ? "#ffffff" : theme.palette.grey3.main,
             }}
           >
             {icon}
-            {title}
+            {!isTablet && title}
           </MiniButtonSetting>
         ))}
       </Box>
       <Box
         sx={{
           padding: "20px",
+          display: "flex",
         }}
       >
         <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>

src/pages/Result/DescriptionForm/DescriptionForm.tsx

@@ -31,10 +31,12 @@ export const DescriptionForm = () => {
   return (
     <Box
       sx={{
+        overflow: "hidden",
         maxWidth: "796px",
         height: "100%",
         bgcolor: "#FFFFFF",
         borderRadius: "12px",
+        boxShadow: "0px 10px 30px #e7e7e7",
       }}
     >
       <Box sx={{ p: "0 20px", pt: "30px" }}>

src/pages/Result/DescriptionForm/ImageAndVideoButtons.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useTheme, useMediaQuery } from "@mui/material";
 
 import AddImage from "@icons/questionsPage/addImage";
 import AddVideofile from "@icons/questionsPage/addVideofile";
@@ -7,11 +7,20 @@ import { CropModal } from "@ui_kit/Modal/CropModal";
 
 export default function ImageAndVideoButtons() {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(400));
 
   const [opened, setOpened] = useState<boolean>(false);
 
   return (
-    <Box sx={{ display: "flex", alignItems: "center", gap: "12px", mt: "20px", mb: "20px" }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        mt: "20px",
+        mb: "20px",
+      }}
+    >
       <AddImage onClick={() => setOpened(true)} />
       <CropModal opened={opened} onClose={() => setOpened(false)} />
       <Typography
@@ -22,7 +31,7 @@ export default function ImageAndVideoButtons() {
           color: theme.palette.grey2.main,
         }}
       >
-        Изображение
+        {!isMobile && "Изображение"}
       </Typography>
       <Typography> или</Typography>
       <AddVideofile />
@@ -34,7 +43,7 @@ export default function ImageAndVideoButtons() {
           color: theme.palette.grey2.main,
         }}
       >
-        Видео
+        {!isMobile && "Видео"}
       </Typography>
     </Box>
   );