Fix main screen layout issue. (#529)

* Migrate flex to grid layout * Align Create Folder Icon * Apply format * heigh 100vh is redundant with grid * Apply format
okfn · Sep 2, 2024 · afc0c3c · afc0c3c
1 parent 849ecc1
commit afc0c3c
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 13 deletions.
diff --git a/client/components/Application/Browser.tsx b/client/components/Application/Browser.tsx
@@ -39,7 +39,7 @@ function DefaultBrowser() {
     >
       <Button
         color="OKFNCoolGray"
-        sx={{ textTransform: 'none', marginLeft: '16px', marginRight: '16px' }}
+        sx={{ textTransform: 'none', marginLeft: '20px', justifyContent: 'flex-start' }}
         startIcon={<img src={createFolderIcon} alt="" />}
         onClick={() => store.openDialog('addEmptyFolder')}
       >

diff --git a/client/components/Application/Layout.tsx b/client/components/Application/Layout.tsx
@@ -15,7 +15,7 @@ export default function Layout() {
     <React.Fragment>
       <Error />
       <Dialog />
-      <Box sx={{ display: 'flex', flexDirection: 'row', height: '100vh' }}>
+      <Box sx={{ display: 'grid', gridTemplateColumns: '284px 1fr' }}>
         <Sidebar />
         <Content />
       </Box>

diff --git a/client/components/Application/LowerMenu.tsx b/client/components/Application/LowerMenu.tsx
@@ -12,9 +12,7 @@ export default function LowerMenu() {
         alignItems: 'flex-start',
         borderTop: '1px solid #E6E7EB',
         padding: '20px',
-        position: 'absolute',
         bottom: 0,
-        width: '100%',
       }}
     >
       <Button

diff --git a/client/components/Application/Sidebar.tsx b/client/components/Application/Sidebar.tsx
@@ -1,24 +1,18 @@
 import Box from '@mui/material/Box'
 import Browser from './Browser'
 import LowerMenu from './LowerMenu'
-import { useTheme } from '@mui/material/styles'
 import sidebarLogo from '../../assets/ODE_sidebar_logo.svg'
 import Button from '@mui/material/Button'
 import * as store from '@client/store'
 
 export default function Sidebar() {
-  const theme = useTheme()
-  const contentHeight = `calc(100vh - ${theme.spacing(8 + 8 + 8)})`
-
   return (
     <Box
       className="sidebar"
       sx={{
         display: 'flex',
-        position: 'relative',
         flexDirection: 'column',
         borderRight: 'solid 1px #ddd',
-        width: '284px',
       }}
     >
       <Box sx={{ padding: '24px' }}>
@@ -32,9 +26,7 @@ export default function Sidebar() {
       >
         Upload your data
       </Button>
-      <Box sx={{ height: contentHeight }}>
-        <Browser />
-      </Box>
+      <Browser />
       <LowerMenu />
     </Box>
   )