fixed the padding on the maps and updated the drawer styling

src/common/DisplayDrawer.tsx

@@ -45,9 +45,10 @@ const useStyles = makeStyles((theme: Theme) => ({
       paddingBottom: 15,
       zIndex: 101
     },
-    appBar: {
+    titleDisplay: {
       position: "static",
-      borderRadius: 30
+      borderRadius: 30,
+      backgroundColor: theme.palette.secondary.main
     },
     drawerPaper: {
       overflowX: "hidden"
@@ -91,7 +92,7 @@ export default function DisplayDrawer(props: Props) {
       classes={{ paper: classes.drawerPaper }}>
       <Box
         className={isMobile ? classes.drawerMobile : classes.drawerDesktop}
-        style={{ width: isMobile ? "100%" : width, height: isMobile ? drawerHeight + "vh" : 0 }}>
+        style={{ width: isMobile ? "100%" : width }}>
         <Box className={classes.header} style={{ width: isMobile ? "100%" : width }}>
           <Box display="flex" justifyContent="space-between" alignItems="center">
             <Box>
@@ -118,10 +119,11 @@ export default function DisplayDrawer(props: Props) {
               )}
             </Box>
           </Box>
-          <AppBar className={classes.appBar} color="secondary">
+          <Box className={classes.titleDisplay}>
             <Grid
               container
               direction="row"
+              justifyContent="space-between"
               alignItems="center"
               wrap="nowrap">
               <Grid>
@@ -142,7 +144,7 @@ export default function DisplayDrawer(props: Props) {
                 </Button>
               </Grid>
             </Grid>
-          </AppBar>
+          </Box>
         </Box>
         <Box>{drawerBody}</Box>
       </Box>

src/maps/MapBase.tsx

@@ -584,6 +584,7 @@ export default function MapBase(props: Props) {
       {tools()}
       {mapStyleDialog()}
       <Map
+        style={{width: "100%", height: "100%"}}
         ref={mapRef}
         maxZoom={18}
         initialViewState={startingView}

src/pages/AviationMap.tsx

@@ -6,7 +6,7 @@ export default function AviationMap() {
   const location = useLocation();
 
   return (
-    <PageContainer>
+    <PageContainer padding={-1}>
       {location.state !== undefined &&
       location.state !== null &&
       location.state.long !== undefined &&

src/pages/ConstructionSiteMap.tsx

@@ -6,7 +6,7 @@ export default function ConstructionSiteMap() {
   const location = useLocation();
 
   return (
-      <PageContainer>
+      <PageContainer padding={-1}>
         {location.state !== undefined &&
         location.state !== null &&
         location.state.long !== undefined &&

src/pages/FieldMap.tsx

@@ -5,7 +5,7 @@ import { useLocation } from "react-router";
 export default function FieldMap() {
   const location = useLocation();
   return (
-    <PageContainer>
+    <PageContainer padding={-1}>
       {location.state !== undefined &&
       location.state !== null &&
       location.state.long !== undefined &&