[Fix]: Enhance Mobile Responsiveness in "Edit Tutorial" Section #1183

src/components/Tutorials/index.jsx

@@ -26,10 +26,14 @@ import { Collapse, Button } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { makeStyles } from "@mui/styles";
 
+
 const useStyles = makeStyles(theme => ({
   flexRow: {
     display: "flex",
-    flexDirection: "row"
+    flexDirection: "row",
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: "column"
+    },
   },
   collapseContainer: {
     minWidth: "100%",
@@ -199,6 +203,7 @@ const ViewTutorial = () => {
           </Grid>
         )}
 
+
         <Grid>
           <Grid xs={24} sm={24} md={24}>
             <TutorialHeading
@@ -210,8 +215,9 @@ const ViewTutorial = () => {
             />
           </Grid>
         </Grid>
+
         <Grid className={classes.flexRow}>
-          <ExpandMore
+          { isDesktop && (<ExpandMore
             data-testid="tutorial-collapse-button"
             expand={expand}
             onClick={() => {
@@ -223,9 +229,11 @@ const ViewTutorial = () => {
           >
             <ExpandMoreIcon className={classes.ExpandIcon} />
           </ExpandMore>
+          )}
 
           <Grid
-            width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : "0"}
+            width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : (isDesktop ? "0" : "90%")}
+            marginLeft={ isDesktop ? "" : "30px"}
             padding={stepPanelVisible ? "0 2rem" : "0"}
             className={classes.widthTransition}
           >
@@ -249,7 +257,7 @@ const ViewTutorial = () => {
             </Collapse>
           </Grid>
 
-          <Grid className={classes.editorContainer}>
+          <Grid className={classes.editorContainer} style={{ marginTop: "20px", padding: isDesktop ? "" : "10px"}}>
             <Grid className="tutorial-content" justify="center" container>
               <Grid
                 xs={24}

src/components/Tutorials/subComps/ControlButtons.jsx

@@ -10,9 +10,9 @@ const useStyles = makeStyles(theme => ({
     display: "flex",
     justifyContent: "space-between",
     [theme.breakpoints.down("sm")]: {
-      flexDirection: "column",
+      flexDirection: "",
       alignItems: "center",
-      gap: "30px"
+      gap: "30px",
     }
   },
   rightButtonsGroup: {
@@ -24,8 +24,12 @@ const useStyles = makeStyles(theme => ({
     "&:hover": {
       borderWidth: "2px"
     },
-    minWidth: "fit-content"
+    minWidth: "fit-content",
+    [theme.breakpoints.down("sm")]: {
+      marginLeft: "-15px"
+    }
   },
+
   completeButton: {
     minWidth: "fit-content"
   }
@@ -39,7 +43,7 @@ const ControlButtons = ({
   setStepData
 }) => {
   const classes = useStyles();
-  if (!hide && stepsData) {
+  if (stepsData) {
     return (
       <Grid>
         <Box className={classes.container}>

src/components/Tutorials/subComps/EditControls.jsx

@@ -116,9 +116,10 @@ const EditControls = ({
   return (
     <>
       <Stack
-        direction={"row"}
+        direction={isDesktop ? "row" : "column"}
         sx={{
-          px: 2
+          px: 2,
+          mt: isDesktop ? 0 : 2
         }}
       >
         <Button
@@ -127,12 +128,14 @@ const EditControls = ({
           variant="contained"
           sx={{
             boxShadow: "none",
-            borderRadius: 1
+            borderRadius: 1,
+            mb: isDesktop ? 0 : 2
           }}
           onClick={() => toggleAddNewStep()}
         >
           <AddIcon /> Add New Step
         </Button>
+        <div>
         <Button
           className="ml-24"
           color="warning"
@@ -149,6 +152,9 @@ const EditControls = ({
             setViewRemoveStepModal(!viewRemoveStepModal);
           }}
           disabled={step_length === 1}
+          sx={{
+            ml: isDesktop ? 0 : 5
+          }}
         >
           <DeleteIcon /> Remove step
           <RemoveStepModal
@@ -160,6 +166,8 @@ const EditControls = ({
             step_length={step_length}
           />
         </Button>
+        </div>
+
         <Box
           sx={{
             flexGrow: 1
@@ -174,20 +182,26 @@ const EditControls = ({
               {mode === "view" && (
                 <Button
                   type="primary"
-                  className="ml-24"
+                 // className="ml-24"
                   onClick={() => setMode("edit")}
                   id="editorMode"
                   data-testId="editorMode"
+                  sx={{
+                    ml: isDesktop ? 0 : 2
+                  }}
                 >
                   <EditIcon /> Editor mode
                 </Button>
               )}
               {mode === "edit" && (
                 <Button
                   type="primary"
-                  className="ml-24"
+                 // className="ml-24"
                   onClick={() => setMode("view")}
                   data-testId="previewMode"
+                  sx={{
+                    ml: isDesktop ? 0 : 2
+                  }}
                 >
                   <FileCopyIcon /> Preview mode
                 </Button>
@@ -197,10 +211,13 @@ const EditControls = ({
                 onClick={handlePublishTutorial}
                 type="dashed"
                 disabled={publishLoad}
+                sx={{
+                  ml: isDesktop ? 0 : 4
+                }}
               >
                 <FileCopyIcon /> {isPublished ? "Unpublish" : "Publish"}
               </Button>
-              <DropdownMenu key="more" />
+              <DropdownMenu key="more"/>
             </>
           )}
         </div>

src/components/Tutorials/subComps/RemoveStepModal.jsx

@@ -5,7 +5,9 @@ import { useFirebase, useFirestore } from "react-redux-firebase";
 import { useDispatch } from "react-redux";
 import { removeStep } from "../../../store/actions";
 import Snackbar from "@mui/material/Snackbar";
+import { useMediaQuery } from "react-responsive";
 import Typography from "@mui/material/Typography";
+import { Box } from "@mui/material";
 
 const RemoveStepModal = ({
   owner,
@@ -20,6 +22,10 @@ const RemoveStepModal = ({
   const dispatch = useDispatch();
   const [visible, setVisible] = useState(false);
 
+  const isDesktop = useMediaQuery({
+    query: "(min-device-width: 767px)"
+  });
+
   useEffect(() => {
     setVisible(viewModal);
   }, [viewModal]);
@@ -64,30 +70,38 @@ const RemoveStepModal = ({
       aria-labelledby="simple-modal-title"
       aria-describedby="simple-modal-description"
       style={{
-        border: "2px solid #000",
-        background: "whitesmoke",
-        boxShadow: "2rem gray",
         display: "flex",
         alignItems: "center",
-        justifyContent: "center",
-        height: "10rem",
-        width: "20rem",
-        position: "absolute",
-        top: "40%",
-        left: "40%"
+        justifyContent: "center"
       }}
     >
-      <div>
-        <Typography>This action is can not be undone!</Typography>
+      <Box
+        style={{
+          border: "2px solid #000",
+          backgroundColor: "#fff",
+          boxShadow: "2rem gray",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "12rem",
+          width: "20rem",
+          position: "absolute",
+          top: "40%",
+          left: isDesktop ? "40%" : " 12%"
+        }}
+      >
+      <div style={{ width: "200px", textAlign: "center", backgroundColor: "" }}>
+        <Typography style={{ fontSize: "20px" }}>This action is can not be undone!</Typography>
         <form onSubmit={handleOnOk}>
-          <Button key="back" onClick={handleOnCancel}>
+          <Button key="back" onClick={handleOnCancel} style={{ color: "white", marginTop: "10px", backgroundColor: "#000" }}>
             <Typography>Cancel</Typography>
           </Button>
-          <Button key="remove" type="submit">
+          <Button key="remove" type="submit" style={{ marginTop: "10px", marginLeft: "20px", background: "#fff" }}>
             <Typography> Remove</Typography>
           </Button>
         </form>
       </div>
+      </Box>
     </Modal>
   );
 };

src/components/Tutorials/subComps/StepsPanel.jsx

@@ -45,7 +45,7 @@ const StepsPanel = ({
         </Grid>
       </Grid>
       {!hideButton &&
-        false && ( //remove false to show
+       false && ( //remove false to show
           <Button
             type="link"
             size="large"

src/components/Tutorials/subComps/TutorialTitle.jsx

@@ -37,7 +37,7 @@ const TutorialHeading = ({
     <Grid
       style={{
         display: "flex",
-        flexDirection: "row",
+        flexDirection: isDesktop ? "row" : "column",
         justifyContent: "space-around",
         alignItems: "center"
       }}