Make mobile view flush with header

ui/app/css/index.css

@@ -721,6 +721,17 @@ div.message-container > div:first-child {
   transform: scale(1.1);
 }
 
+.main-container {
+  width: 100%;
+  z-index: 18;
+  box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+  font-family: DIN OT;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  overflow-y: scroll;
+}
+
 @media screen and (min-width: 576px) {
   .lap-visible {
     display: flex;
@@ -730,6 +741,18 @@ div.message-container > div:first-child {
     display: none;
   }
 
+  .main-container {
+    // position: absolute;
+    // margin-top: 35px;
+    // z-index: 18;
+    // box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    // font-family: DIN OT;
+    // display: flex;
+    // flex-wrap: wrap;
+    // align-items: stretch;
+    // overflow-y: scroll;    
+    // width: 100%;
+  }
 }
 
 @media screen and (max-width: 575px) {
@@ -741,4 +764,8 @@ div.message-container > div:first-child {
     display: flex;
   }
 
+  .main-container {
+    position: absolute;
+    margin-top: 35px;
+  }
 }

ui/app/main-container.js

@@ -15,12 +15,6 @@ function MainContainer () {
 
 MainContainer.prototype.render = function () {
 
-  // 1. Fixing Mobile View: flush container
-  //   media query for mobile view:
-  //   position: absolute;
-  //   margin-top: 35px;
-  //   width: 100%;
-  // 
   // 2. Fix responsive sizing - smaller
   //    https://puu.sh/x0gDA/5ff3b734eb.png
   // 
@@ -33,19 +27,8 @@ MainContainer.prototype.render = function () {
   //
   //  4. style all buttons as <button>s: accessibility + mobile focus
 
-  return h('div', {
+  return h('div.main-container', {
-    style: {
+    style: {}
-      position: 'absolute',
-      marginTop: '35px',
-      width: '98%',
-      zIndex: 20,
-      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
-      fontFamily: 'DIN OT',
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'stretch',
-      overflowY: 'scroll',
-    }
   }, [h(AccountAndTransactionDetails, {}, [])])
 }