More mobile fixes

web/dist/main.css

@@ -84,7 +84,7 @@ html {
   box-sizing: border-box;
   width: 572px;
   padding-top: 60px;
-  /*float: right;*/
+  float: right;
   height: 100%;
   border: 1px solid #e6e6e6;
   background: rgba(252,252,253,.9);
@@ -466,6 +466,7 @@ html {
 
   #right {
     width: 100%;
+    float: none;
   }
 
   .filters-btn-toggle {
@@ -495,11 +496,6 @@ html {
     display: block;
   }
 
-  .left-hidden {
-    /*position: absolute;*/
-    /*left: -100%;*/
-  }
-
   .right-shown {
     display: block;
   }
@@ -508,8 +504,14 @@ html {
     display: none;
   }
 
+
+  .left-absolute { 
+    position:absolute;
+  }
+
   .left-base {
     display: block;
+    position: static;
   }
 
   #header .title {

web/src/components/Main.js

@@ -6,6 +6,7 @@ import {pacSelectFirst} from '../helpers/googleMaps'
 import {loadProperties, loadSeen, loadListing} from '../lib/api'
 import {handleMessage} from '../lib/handlers'
 import Router from '../lib/router'
+import {isMobile} from '../lib/helpers'
 
 class Main extends React.Component {
   constructor (props) {
@@ -136,6 +137,10 @@ class Main extends React.Component {
 
         map.fitBounds(initialBounds)
         map.setOptions({maxZoom: originalMaxZoom, minZoom: originalMinZoom})
+        if (isMobile()) {
+          document.getElementById('left').classList.add("left-absolute");
+          this.addAbsoluteLeftInRender = true;
+        }
       }
     })
     map.addListener('idle', regularIdle)
@@ -573,7 +578,7 @@ class Main extends React.Component {
     let rightClass = 'right-base'
 
     if (this.state.listingId || this.state.mapClicked) {
-      leftClass = 'left-hidden'
+      leftClass = this.addAbsoluteLeftInRender ? 'left-absolute' : ''
       rightClass = 'right-shown'
     }