Width and height issues (#198)

* Width and height issues * Sidebar width on lg screens and edge issues * 4 charts on mid screens Signed-off-by: Courtney Gosselin <[email protected]> --------- Signed-off-by: Courtney Gosselin <[email protected]>
CanDIG · Dec 16, 2024 · 6e68ee3 · 6e68ee3
1 parent 27c841b
commit 6e68ee3
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
@@ -79,15 +79,7 @@ const Root = styled('div')(({ theme, leftDrawerOpened }) => ({
         }),
         marginLeft: 0,
         borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        [theme.breakpoints.down('lg')]: {
-            marginLeft: '20px'
-            // marginLeft: -(drawerWidth - 20)
-        },
-        [theme.breakpoints.down('md')]: {
-            marginLeft: '20px'
-            // marginLeft: -(drawerWidth - 10)
-        }
+        borderBottomRightRadius: 0
     },
     [`& .${classes.footer}`]: {
         backgroundColor: theme.palette.background.default,
@@ -105,7 +97,7 @@ const Root = styled('div')(({ theme, leftDrawerOpened }) => ({
 
 function MainLayout() {
     const theme = useTheme();
-    const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'));
+    const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));
 
     // Handle left drawer
     const [sidebarContent, setSidebarContent] = useState(null);

diff --git a/src/themes/index.js b/src/themes/index.js
@@ -47,8 +47,8 @@ export function theme(customization) {
                 xs: 0,
                 sm: 600,
                 md: 960,
-                lg: 1465,
-                xl: 1920
+                lg: 1240,
+                xl: 2560
             }
         },
         typography: themeTypography(themeOption),

diff --git a/src/views/clinicalGenomic/widgets/dataVisualization.js b/src/views/clinicalGenomic/widgets/dataVisualization.js
@@ -211,7 +211,7 @@ function DataVisualization() {
 
     function returndataVisData() {
         const data = dataVisData.map((item, index) => (
-            <Grid item xs={12} sm={12} md={6} lg={3} key={item + index}>
+            <Grid item xs={12} sm={12} md={6} lg={3} xl={3} key={item + index}>
                 <CustomOfflineChart
                     dataObject=""
                     dataVis={dataVis}