first round of feedback from imaginer

Author: matthargett

admin/src/admin.js

@@ -72,11 +72,25 @@ const CustomNotification = props => {
 let itaSchemas;
 
 const theme = createTheme({
-  overrides: {
+  components: {
     MuiDrawer: {
-      docked: {
-        background: "#222222",
-        minHeight: "100vh"
+      styleOverrides: {
+        paper: {
+          backgroundColor: "#222222",
+          minHeight: "100vh",
+          position: "sticky",
+          top: 0,
+          overflowX: "hidden"
+        }
+      }
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          position: "sticky",
+          top: 0,
+          zIndex: 1100
+        }
       }
     }
   },
@@ -252,10 +266,15 @@ const HiddenAppBar = withStyles({
     "@media (min-width: 768px) and (min-height: 480px)": {
       display: "none"
     }
+  },
+  root: {
+    position: "sticky",
+    top: 0,
+    zIndex: 1100
   }
 })(props => {
   const { classes, ...other } = props;
-  return <AppBar {...other} className={classes.hideOnDesktop} />;
+  return <AppBar {...other} className={`${classes.hideOnDesktop} ${classes.root}`} />;
 });
 
 document.addEventListener("DOMContentLoaded", async () => {

admin/src/react-components/admin-menu.js

@@ -29,17 +29,21 @@ const styles = () => ({
   root: {
     width: "100%",
     paddingTop: 0,
+    backgroundColor: "#222222",
+    minHeight: "100vh",
+    position: "sticky",
+    top: 0,
 
     "& .active": {
-      background: "#1700c7!important"
+      backgroundColor: "#1700c7 !important"
     },
 
     "& .active div span": {
-      color: "#ffffff!important"
+      color: "#ffffff !important"
     },
 
     "& .active svg": {
-      color: "#FFFFFF"
+      color: "#FFFFFF !important"
     },
 
     active: {
@@ -52,7 +56,10 @@ const styles = () => ({
   logo: {
     margin: 0,
     padding: 0,
-    background: "#222222;!important",
+    backgroundColor: "#222222 !important",
+    position: "sticky",
+    top: 0,
+    zIndex: 10,
 
     "& img": {
       padding: "0 12px 8px 12px",

admin/src/styles/globals.scss

@@ -33,3 +33,37 @@ button[type="button"] {
 * {
   box-sizing: border-box;
 }
+
+// Fix Material-UI v5 sidebar and layout issues
+.MuiDrawer-root {
+  .MuiDrawer-paper {
+    background-color: #222222 !important;
+    min-height: 100vh !important;
+    position: sticky !important;
+    top: 0 !important;
+    overflow-x: hidden !important;
+  }
+}
+
+// Ensure consistent layout
+.RaLayout-root {
+  display: flex !important;
+  min-height: 100vh !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+// Fix main content area
+.RaLayout-content {
+  flex: 1 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+// Override any problematic Material-UI margins/padding
+.MuiBox-root {
+  &:first-child {
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+  }
+}

admin/src/styles/ui/page.scss

@@ -10,6 +10,20 @@
 .global_background {
   // need to override material
   background-color: $color-neutral-1 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  
+  // Fix Material-UI v5 layout issues
+  & .MuiBox-root {
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+  }
+  
+  // Ensure main content area starts properly
+  & main {
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+  }
 }
 
 .card_section {

admin/src/utils/with-common-styles.js

@@ -2,7 +2,12 @@ import { blue, green, amber } from "@material-ui/core/colors";
 
 const getCommon = theme => ({
   container: {
-    ...theme.mixins.gutters(),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+    },
     ...theme.typography,
     display: "flex",
     flexWrap: "wrap",