feat(admin-ui): update tablet view dashboard

GluuFederation · Jul 18, 2022 · 6d26cc8 · 6d26cc8
1 parent 779ba82
commit 6d26cc8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/admin-ui/app/routes/Dashboards/DashboardPage.js b/admin-ui/app/routes/Dashboards/DashboardPage.js
@@ -339,7 +339,7 @@ function DashboardPage({
                   >
                     <Paper
                       className={classes.userInfo}
-                      style={isMobile ? { marginLeft: 0 } : {}}
+                      style={isTabletOrMobile ? { marginLeft: 0 } : {}}
                       elevation={3}
                     >
                       <div className={classes.userInfoTitle}>User Info</div>
@@ -380,7 +380,7 @@ function DashboardPage({
                   <Grid
                     xs={12}
                     item
-                    style={{ marginLeft: 40, marginBottom: 40 }}
+                    style={isTabletOrMobile ? { marginLeft: 40 } : { marginLeft: 40, marginBottom: 40 }}
                   >
                     <div>Select a date range</div>
                     <DateRange />
@@ -391,7 +391,7 @@ function DashboardPage({
                     style={isMobile ? mobileChartStyle : {}}
                     item
                   >
-                    <div className={classes.chartContainer}>
+                    <div className={isTabletOrMobile ? classes.chartContainerTable : classes.chartContainer}>
                       <DashboardChart />
                     </div>
                   </Grid>

diff --git a/admin-ui/app/routes/Dashboards/styles.js b/admin-ui/app/routes/Dashboards/styles.js
@@ -115,6 +115,11 @@ const styles = makeStyles(() => ({
     maxWidth: '40vw',
     height: 'max-content',
   },
+  chartContainerTable: {
+    width: 780,
+    maxWidth: '63vw',
+    height: 'max-content',
+  },
   supportContainer: {
     display: 'flex',
     marginLeft: 20,