Trying to fix ios scrolling

4 files changed, 17 insertions, 20 deletions

diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index 55a4c287..538bfe7b 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -81,8 +81,6 @@ function Feed(props) {
   }, [props.visitor, props.location]);
 
   let loadMessages = (hash = '', filter = '') => {
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
     setMsgs([]);
     const filterParams = qs.parse(filter);
     let params = Object.assign({}, filterParams || {}, props.query.search || {});
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index f94ad358..2c88abc3 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -32,8 +32,6 @@ export default class Thread extends React.Component {
     this.loadReplies();
   }
   loadReplies() {
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
     this.setState({ replies: [], loading: true });
     const { mid } = this.props.match.params;
     let params = {
diff --git a/vnext/src/components/UserInfo.css b/vnext/src/components/UserInfo.css
index e57b4585..5bb913ac 100644
--- a/vnext/src/components/UserInfo.css
+++ b/vnext/src/components/UserInfo.css
@@ -2,3 +2,9 @@
     padding: 40px;
     background-color: #fdfdfe;
 }
+.info-avatar img {
+    max-height: 24px;
+    max-width: 24px;
+    padding: 6px;
+    vertical-align: middle;
+}
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index b70e0b2c..b3341748 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -19,6 +19,11 @@ pre {
     padding: 0;
 }
 
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
 body {
     text-size-adjust: 100%;
     word-break: break-word;
@@ -79,11 +84,11 @@ hr {
     background: #fdfdfe;
     display: grid;
     grid-template-areas: "header" "content" "footer";
-    grid-template-columns: 1fr;
+    grid-template-columns: 100%;
     grid-template-rows: auto 1fr auto;
     transition: margin-left 0.2s;
-    min-height: 100vh;
-    max-height: 100vh;
+    min-height: 100%;
+    max-height: 100%;
 }
 
 #header {
@@ -106,18 +111,7 @@ hr {
 }
 
 #sidebar {
-    color: #222;
-    transition: width 0.2s;
-    position: fixed;
-    width: 0;
-    top: 0;
-    left: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    height: 100%;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
+    display: none;
 }
 
 .nav_content {
@@ -130,6 +124,7 @@ hr {
     margin-top: 12px;
     overflow-x: hidden;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     transition: margin-left 0.4s;
 }
 
@@ -312,7 +307,7 @@ hr {
     }
     #sidebar {
         border: 0;
-        position: static;
+        display: block;
         grid-area: nav;
         top: inherit;
         left: inherit;