chore: Dynamic Size

packages/client/src/App.css

@@ -1,7 +1,6 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 3rem;
   text-align: center;
 }
 
@@ -42,4 +41,4 @@
 
 .read-the-docs {
   color: #888;
-}
+}

packages/client/src/App.tsx

@@ -25,23 +25,25 @@ import { CssBaseline, Box, styled } from '@mui/material';
 import { useState } from 'react';
 import { SideBar } from './components/SideBar';
 
-const drawerWidth = 240;
+const drawerWidth = 256;
 
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean; }>(({ theme, open }) => ({
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+  open?: boolean;
+}>(({ theme, open }) => ({
   flexGrow: 1,
   padding: theme.spacing(3),
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
+    duration: theme.transitions.duration.leavingScreen
   }),
-  marginRight: -drawerWidth,
+  marginLeft: `-${drawerWidth}px`,
   ...(open && {
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
+      duration: theme.transitions.duration.enteringScreen
     }),
-    marginRight: 0,
-  }),
+    marginLeft: 0
+  })
 }));
 
 function App() {
@@ -52,35 +54,37 @@ function App() {
       <BrowserRouter>
         <EnvironmentContextProvider>
           <AuthProvider>
-            <Box sx={{ display: 'flex' }}>
-              <CssBaseline />
+            <CssBaseline />
+            <Box>
               <NavBar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
-                <Main open={drawerOpen}>
-                  <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
-                  <Box sx={{ display: 'flex' }}>
-                    <Routes>
-                      <Route path={'/'} element={<HomePage />} />
-                      <Route path={'/callback'} element={<AuthCallback />} />
-                      <Route path={'/loginpage'} element={<LoginPage />} />
-                      <Route element={<AdminGuard />}>
-                        <Route path={'/project/new'} element={<NewProject />} />
-                        <Route path={'/project/controls'} element={<ProjectControl />} />
-                        <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
-                        <Route path={'/study/new'} element={<NewStudy />} />
-                        <Route path={'/study/controls'} element={<StudyControl />} />
-                        <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
-                        <Route path={'/study/tags'} element={<DownloadTags />} />
-                        <Route path={'/successpage'} element={<SuccessPage />} />
-                        <Route path={'/dataset/controls'} element={<DatasetControls />} />
-                        <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
-                        <Route path={'/study/contribute'} element={<ContributePage />} />
-                        <Route path={'/tagging'} element={<TagView />} />
-                        <Route path={'/logoutpage'} element={<LogoutPage />} />
-                      </Route>
-                    </Routes>
-                  </Box>
-                </Main>
+            </Box>
+            <Main open={drawerOpen}>
+              <Box sx={{ display: 'flex' }}>
+                <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
+                <Box sx={{ flexGrow: 1, width: '90%' }}>
+                  <Routes>
+                    <Route path={'/'} element={<HomePage />} />
+                    <Route path={'/callback'} element={<AuthCallback />} />
+                    <Route path={'/loginpage'} element={<LoginPage />} />
+                    <Route element={<AdminGuard />}>
+                      <Route path={'/project/new'} element={<NewProject />} />
+                      <Route path={'/project/controls'} element={<ProjectControl />} />
+                      <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
+                      <Route path={'/study/new'} element={<NewStudy />} />
+                      <Route path={'/study/controls'} element={<StudyControl />} />
+                      <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
+                      <Route path={'/study/tags'} element={<DownloadTags />} />
+                      <Route path={'/successpage'} element={<SuccessPage />} />
+                      <Route path={'/dataset/controls'} element={<DatasetControls />} />
+                      <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
+                      <Route path={'/study/contribute'} element={<ContributePage />} />
+                      <Route path={'/tagging'} element={<TagView />} />
+                      <Route path={'/logoutpage'} element={<LogoutPage />} />
+                    </Route>
+                  </Routes>
+                </Box>
               </Box>
+            </Main>
           </AuthProvider>
         </EnvironmentContextProvider>
       </BrowserRouter>

packages/client/src/components/ControlComponent.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import DeleteIcon from '@mui/icons-material/DeleteOutlined';
 import { GridRowModesModel, GridActionsCellItem, GridRowId } from '@mui/x-data-grid-pro';
@@ -31,13 +30,15 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
     {
       field: 'name',
       headerName: 'Name',
-      width: 200,
+      flex: 1,
+      maxWidth: 200,
       editable: true
     },
     {
       field: 'description',
       headerName: 'Description',
-      width: 575,
+      flex: 1,
+      minWidth: 500,
       editable: true
     },
     {
@@ -53,32 +54,22 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%' }}>
-      <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            whiteSpce: 'initial !important',
-            lineHeight: '16px !important',
-            paddingTop: '10px !important',
-            paddingBottom: '10px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 8
-            }
-          }
-        }}
-        pageSizeOptions={[5]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };

packages/client/src/components/DatasetAccessComponent.tsx

@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Switch } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -72,31 +72,22 @@ export const DatasetAccessComponent: React.FC<Table> = ({ tableRows }: Table) =>
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', boxShadow: '1px 9px 15px darkgrey' }}>
-      <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 10
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 10
-            }
-          }
-        }}
-        pageSizeOptions={[5]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };

packages/client/src/components/DatasetControlComponent.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
 import { useState } from 'react';
@@ -27,34 +26,22 @@ export const DatasetControlComponent: React.FC<Table> = ({ tableRows, columns }:
   };
 
   return (
-    <Box sx={{ height: 350, width: '100%', boxShadow: '1px 9px 15px darkgrey' }}>
-      <DataGrid
-        sx={{
-          '&.MuiDataGrid-root': {
-            fontWeight: 'normal'
-          },
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 5
-            }
-          }
-        }}
-        pageSizeOptions={[5, 10, 15]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5, 10, 15]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };

packages/client/src/components/SideBar.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode, useState } from 'react';
 import { Collapse, Divider, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { ExpandMore, ExpandLess, School, Dataset, Work, Logout } from '@mui/icons-material';
+import { ExpandMore, ExpandLess, School, Dataset, Work, Logout, GroupWork } from '@mui/icons-material';
 import { useAuth } from '../context/AuthContext';
 import {useNavigate} from 'react-router-dom';
 
@@ -30,7 +30,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
       icon: <School />,
       subItems: [
         { name: 'New Study', action: () => navigate('/study/new') },
-        { name: 'Study Control', action: () => navigate('/study/contols') },
+        { name: 'Study Control', action: () => navigate('/study/controls') },
         { name: 'User Permissions', action: () => navigate('/study/permissions') },
         { name: 'Entry Controls', action: () => navigate('/study/controls') },
         { name: 'Download Tags', action: () => navigate('/study/tags') }
@@ -45,6 +45,14 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
         { name: 'Project Access', action: () => navigate('/dataset/projectaccess') }
       ]
     },
+    {
+      name: 'Contribute',
+      action: () => {},
+      icon: <GroupWork />,
+      subItems: [
+        { name: 'Tag in Study', action: () => navigate('/study/contribute') }
+      ]
+    },
     {
       name: 'Logout',
       action: logout,
@@ -63,6 +71,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
           boxSizing: 'border-box',
           backgroundColor: '#103F68',
           color: 'white',
+          paddingTop: 18,
           mt: '64px'
         }
       }}