From b9949a4b7dd5ec3ba026ff879168aa71f7f2f10c Mon Sep 17 00:00:00 2001
From: Jatin Mehta <mjatin78@gmail.com>
Date: Wed, 4 Dec 2024 23:59:02 +0530
Subject: [PATCH] update responsive design dashboard

---
 .../app/routes/Dashboards/DashboardPage.js    | 32 +++++--------------
 admin-ui/app/routes/Dashboards/styles.js      |  7 ++--
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
index 696c576c2..3ccd9029c 100644
--- a/admin-ui/app/routes/Dashboards/DashboardPage.js
+++ b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -295,13 +295,8 @@ function DashboardPage() {
         canShow={hasBoth(permissions, STAT_READ, STAT_JANS_READ)}
       >
         <div className={classes.root}>
-          <Grid
-            spacing={{ sm: "20px", md: "40px" }}
-            container
-            className="px-40"
-            style={{ height: "500px" }}
-          >
-            <Grid item lg={breakDashboardCard ? 6 : 4} md={4} height="auto">
+          <Grid container className="px-40" spacing={2}>
+            <Grid item lg={3} md={12} xs={12} height="auto">
               <div
                 className={classes.userInfoTitle}
                 style={{
@@ -336,33 +331,23 @@ function DashboardPage() {
               </div>
             </Grid>
 
-            <Grid
-              item
-              lg={breakDashboardCard ? 6 : 4}
-              md={4}
-              xs={4}
-              style={{ width: "100%", padding: "40px 0 0 0" }}
-            >
+            <Grid item lg={5} md={12} xs={12} height={{ lg: "55vh", xs: "65vh", ms:"65vh", sm:"65vh" }}>
               {StatusCard}
             </Grid>
 
             <Grid
               item
-              lg={breakDashboardCard ? 6 : 4}
-              md={4}
-              xs={4}
-              style={{ width: "100%", padding: "40px 0 0 0" }}
+              lg={4}
+              md={12}
+              xs={12}
+            
             >
               <Paper
                 className={`${classes.dashboardCard} top-minus-40 d-flex justify-content-center`}
                 elevation={0}
                 spacing={2}
               >
-                <Grid
-                  className={classes.flex}
-                  container
-                  style={{ maxWidth: "450px" }}
-                >
+                <Grid className={classes.flex} container>
                   <Grid item xs={12} className={isMobile ? "mt-20" : ""}>
                     <div className={classes.userInfo}>
                       <div
@@ -381,7 +366,6 @@ function DashboardPage() {
                         style={{
                           backgroundColor: "white",
                           padding: "20px",
-                          height: "320px",
                           borderRadius: "5px",
                         }}
                       >
diff --git a/admin-ui/app/routes/Dashboards/styles.js b/admin-ui/app/routes/Dashboards/styles.js
index dac96dbaf..af5022292 100644
--- a/admin-ui/app/routes/Dashboards/styles.js
+++ b/admin-ui/app/routes/Dashboards/styles.js
@@ -4,6 +4,8 @@ const styles = makeStyles()({
   root: {
     color: "#FFFFFF",
     maxWidth: "100vw",
+    height: "100vh",
+    overflow:"auto"
   },
   flex: {
     flexGrow: 1,
@@ -13,8 +15,8 @@ const styles = makeStyles()({
     display: "block",
   },
   summary: {
-    height: "74px",
-    width: "70%",
+    height: "auto",
+    width: "100%",
     display: "flex",
     justifyContent: "space-between",
     border: "3px solid #FFF",
@@ -106,7 +108,6 @@ const styles = makeStyles()({
     borderRadius: 24,
     height: "auto",
     color: "#303641",
-    minWidth: 350,
   },
   userInfoTitle: {
     fontWeight: "bold",