From 1ecd33c84dd4f296c05e7b91bd35a1c0b36b5d1c Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Sun, 1 Dec 2024 22:14:39 +0530
Subject: [PATCH] admin grid issue fixed

---
 src/pages/course-planner/index.tsx | 108 +++++++++++++----------------
 1 file changed, 50 insertions(+), 58 deletions(-)

diff --git a/src/pages/course-planner/index.tsx b/src/pages/course-planner/index.tsx
index 12fc6589..9159573b 100644
--- a/src/pages/course-planner/index.tsx
+++ b/src/pages/course-planner/index.tsx
@@ -207,32 +207,64 @@ const Foundation = () => {
               <Typography>{t("MASTER.STATE")}</Typography>
             </Box>
             <Divider />
-            <Grid container spacing={2} mt={2}>
-              <Box
-                sx={{
-                  display: "flex",
-                  flexDirection: "row",
-                }}
-              >
+              <Grid container spacing={2} mt={2} sx={{ overflow: "hidden", maxWidth: "100%" }}>
                 {role === "Central Admin CCTA" ? (
                   stateNames.map((stateName) => (
+                    <Grid item xs={12} sm={6} md={4} lg={3} key={stateName}>
+                      <Box
+                        sx={{
+                          cursor: "pointer",
+                          border: "1px solid #D0C5B4",
+                          padding: "10px",
+                          borderRadius: "8px",
+                          width: "100%",
+                          boxSizing: "border-box",
+                          "&:hover": {
+                            backgroundColor: "#D0C5B4",
+                          },
+                        }}
+                        onClick={() => handleCardClick(stateName)}
+                      >
+                        <Box
+                          sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "18px",
+                          }}
+                        >
+                          <FolderOutlinedIcon />
+                          <Typography>{stateName}</Typography>
+                        </Box>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                          <Button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleCopyLink(stateName);
+                            }}
+                            sx={{ minWidth: "auto", padding: 0 }}
+                          >
+                            {/* Add any icon or text for the copy link button */}
+                          </Button>
+                        </Box>
+                      </Box>
+                    </Grid>
+                  ))
+                ) : (
+                  <Grid item xs={12}>
                     <Box
-                      key={stateName}
                       sx={{
                         cursor: "pointer",
                         border: "1px solid #D0C5B4",
                         padding: "10px",
+                        borderRadius: "8px",
                         display: "flex",
                         justifyContent: "space-between",
-                        marginLeft: "15px",
-                        marginBottom: "10px",
-                        marginRight: "10px",
-                        width: "250px",
+                        width: "100%",
                         "&:hover": {
                           backgroundColor: "#D0C5B4",
                         },
                       }}
-                      onClick={() => handleCardClick(stateName)}
+                      onClick={() => handleCardClick(store?.matchingstate?.name)}
                     >
                       <Box
                         sx={{
@@ -242,13 +274,13 @@ const Foundation = () => {
                         }}
                       >
                         <FolderOutlinedIcon />
-                        <Typography>{stateName}</Typography>
+                        <Typography>{store?.matchingstate?.name}</Typography>
                       </Box>
                       <Box sx={{ display: "flex", alignItems: "center" }}>
                         <Button
                           onClick={(e) => {
                             e.stopPropagation();
-                            handleCopyLink(stateName);
+                            handleCopyLink(store?.matchingstate?.name);
                           }}
                           sx={{ minWidth: "auto", padding: 0 }}
                         >
@@ -256,50 +288,10 @@ const Foundation = () => {
                         </Button>
                       </Box>
                     </Box>
-                  ))
-                ) : (
-                  <Box
-                    sx={{
-                      cursor: "pointer",
-                      border: "1px solid #D0C5B4",
-                      padding: "10px",
-                      borderRadius: "8px",
-                      display: "flex",
-                      justifyContent: "space-between",
-                      marginBottom: "10px",
-                      marginRight: "10px",
-                      width: "250px",
-                      "&:hover": {
-                        backgroundColor: "#D0C5B4",
-                      },
-                    }}
-                    onClick={() => handleCardClick(store?.matchingstate?.name)}
-                  >
-                    <Box
-                      sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "18px",
-                      }}
-                    >
-                      <FolderOutlinedIcon />
-                      <Typography>{store?.matchingstate?.name}</Typography>
-                    </Box>
-                    <Box sx={{ display: "flex", alignItems: "center" }}>
-                      <Button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleCopyLink(store?.matchingstate?.name);
-                        }}
-                        sx={{ minWidth: "auto", padding: 0 }}
-                      >
-                        {/* Add any icon or text for the copy link button */}
-                      </Button>
-                    </Box>
-                  </Box>
+                  </Grid>
                 )}
-              </Box>
-            </Grid>
+              </Grid>
+
           </Box>
         )}
       </>