мобильный чат техподдержки, мелкие правки по дизайну

src/pages/createQuize/MyQuizzesFull.tsx

@@ -74,6 +74,7 @@ export default function MyQuizzesFull({
               flexWrap: "wrap",
               gap: "40px",
               mb: "60px",
+              width: isMobile ? "100%" : undefined,
             }}
           >
             {quizes.map((quiz) => {

src/pages/createQuize/QuizCard.tsx

@@ -75,7 +75,7 @@ export default function QuizCard({
         display: "flex",
         flexDirection: "column",
         backgroundColor: "white",
-        width: "560px",
+        width: isMobile ? "100%" : "560px",
         height: "280px",
         p: "20px",
         borderRadius: "12px",

src/ui_kit/FloatingSupportChat/Chat.tsx

@@ -34,14 +34,17 @@ import {
   createTicket,
 } from "@frontend/kitui";
 import { sendTicketMessage } from "../../api/ticket";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
 
 interface Props {
   sx?: SxProps<Theme>;
+  onclickArrow?: () => void;
 }
 
-export default function Chat({ sx }: Props) {
+export default function Chat({ sx, onclickArrow }: Props) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(800));
   const [messageField, setMessageField] = useState<string>("");
   const sessionData = useUnauthTicketStore((state) => state.sessionData);
   const messages = useUnauthTicketStore((state) => state.messages);
@@ -195,7 +198,7 @@ export default function Chat({ sx }: Props) {
       sx={{
         display: "flex",
         flexDirection: "column",
-        height: "clamp(250px, calc(100vh - 90px), 600px)",
+        height: isMobile ? "100%" : "clamp(250px, calc(100vh - 90px), 600px)",
         backgroundColor: "#944FEE",
         borderRadius: "8px",
         ...sx,
@@ -204,6 +207,7 @@ export default function Chat({ sx }: Props) {
       <Box
         sx={{
           display: "flex",
+          alignItems: "center",
           gap: "9px",
           pl: "22px",
           pt: "12px",
@@ -211,6 +215,11 @@ export default function Chat({ sx }: Props) {
           filter: "drop-shadow(0px 3px 12px rgba(37, 39, 52, 0.3))",
         }}
       >
+        {isMobile && (
+          <IconButton onClick={onclickArrow}>
+            <ArrowLeft color="white" />
+          </IconButton>
+        )}
         <UserCircleIcon />
         <Box
           sx={{

src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx

@@ -1,8 +1,17 @@
-import { Box, Fab, useTheme, useMediaQuery } from "@mui/material";
-import { useState } from "react";
+import {
+  Box,
+  Fab,
+  useTheme,
+  useMediaQuery,
+  Slide,
+  Dialog,
+} from "@mui/material";
+import { ReactNode, useState } from "react";
 import CircleDoubleDown from "./QuestionIcon";
-
+import * as React from "react";
 import Chat from "./Chat";
+import { TransitionProps } from "@mui/material/transitions";
+import { useLocation } from "react-router-dom";
 
 const animation = {
   "@keyframes runningStripe": {
@@ -14,27 +23,54 @@ const animation = {
   },
 };
 
+const Transition = React.forwardRef(function Transition(
+  props: TransitionProps & {
+    children: ReactNode;
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
 export default function FloatingSupportChat() {
   const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(800));
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+  const locationChat = location.pathname;
 
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
   return (
     <Box
       sx={{
         position: "fixed",
         right: "20px",
-        bottom: "100px",
+        bottom: locationChat !== "/edit" ? "10px" : "100px",
         display: "flex",
         flexDirection: "column",
         gap: "8px",
-        width: "clamp(200px, 100% - 40px, 454px)",
+        width: isChatOpened ? "clamp(200px, 100% - 40px, 454px)" : "64px",
         zIndex: 10,
       }}
     >
       {isChatOpened && (
         <Chat sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }} />
       )}
+      <Dialog
+        fullScreen
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Transition}
+      >
+        <Chat onclickArrow={handleClose} />
+      </Dialog>
       <Fab
         disableRipple
         sx={{
@@ -52,7 +88,13 @@ export default function FloatingSupportChat() {
           },
         }}
         variant={"extended"}
-        onClick={() => setIsChatOpened((prev) => !prev)}
+        onClick={() => {
+          if (isMobile) {
+            setOpen(true);
+          } else {
+            setIsChatOpened((prev) => !prev);
+          }
+        }}
       >
         {!isChatOpened && (
           <Box