Simple responsive dashboard layout

Author: lukeheath

frontend/components/MainContent/_styles.scss

@@ -1,11 +1,15 @@
 .main-content {
-  padding: $pad-xlarge;
+  padding: $pad-small;
   background-color: $core-white;
   flex-grow: 1;
   // overflow: auto allows for horizontal scrolling
   // of the main-content when there is a banner. (e.g. sandbox mode)
   // Without it the main content pushes the banner off the page.
   overflow: auto;
+  
+  @media (min-width: $break-mobile-sm) {
+    padding: $pad-xxlarge;
+  }
 
   > :not(.main-content--animation-disabled) {
     animation: fade-in 250ms ease-out;

frontend/components/Modal/_styles.scss

@@ -78,15 +78,16 @@
     padding: $pad-xxlarge;
     border-radius: 8px;
     animation: scale-up 150ms ease-out;
+    width: 100%;
 
     &__medium {
-      width: 650px;
+      max-width: 650px;
     }
     &__large {
-      width: 800px;
+      max-width: 800px;
     }
     &__xlarge {
-      width: 850px;
+      max-width: 850px;
     }
     &__auto {
       width: auto;

frontend/layouts/CoreLayout/CoreLayout.tsx

@@ -61,7 +61,6 @@ const CoreLayout = ({ children, router, location }: ICoreLayoutProps) => {
 
   return (
     <div className="app-wrap">
-      <UnsupportedScreenSize />
       <nav className="site-nav-container">
         <SiteTopNav
           config={config}

frontend/layouts/CoreLayout/_styles.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  min-width: 320px;
   background-color: $ui-off-white;
 }
 
@@ -13,11 +14,6 @@
   background-color: $core-white;
   display: flex;
 
-  // App hidden below 768px
-  @media (max-width: $break-xs - 1px) {
-    display: none;
-  }
-
   // App not hidden when printing
   @media print {
     display: initial;
@@ -39,11 +35,6 @@
   left: 0;
   z-index: 100;
 
-  // Nav hidden below 768px;
-  @media (max-width: $break-xs - 1px) {
-    display: none;
-  }
-
   // Nav not hidden when printing
   @media print {
     display: initial;

frontend/pages/DashboardPage/components/InfoCard/_styles.scss

@@ -1,11 +1,15 @@
 .dashboard-info-card {
-  padding: 32px;
+  padding: $pad-medium;
   width: 100%;
   background-color: $core-white;
   border: 1px solid $ui-fleet-black-10;
   border-radius: 8px;
   box-sizing: border-box;
 
+  @media (min-width: $break-mobile-sm) {
+    padding: $pad-xlarge;
+  }
+
   &__section-title-cta {
     display: flex;
     justify-content: space-between;

frontend/styles/var/breakpoints.scss

@@ -4,9 +4,13 @@ $break-lg: 1400px;
 $break-md: 990px;
 $break-sm: 880px;
 $break-xs: 768px;
+<<<<<<< HEAD
 $break-mobile-lg: 650px;
 $break-mobile-md: 576px;
 $break-mobile-sm: 480px;
 $break-mobile-xs: 320px;
+=======
+$break-xxs: 480px;
+>>>>>>> c134e94f55 (Simple responsive dashboard layout)
 $tooltip-break-md: 1000px; // Prevents horizontal scrolling off viewport
 $table-controls-break: 1150px;