From 198bd9a64c55386836131e186317f393c649aff2 Mon Sep 17 00:00:00 2001
From: or-else <or.else@gmail.com>
Date: Sat, 17 Nov 2018 21:34:13 +0300
Subject: [PATCH] keep message view in the same scroll position on vertical
 resize

---
 src/views/messages-view.jsx |  4 ++++
 src/views/tinode-web.jsx    | 11 +++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/views/messages-view.jsx b/src/views/messages-view.jsx
index 2859bf03..2f29680a 100644
--- a/src/views/messages-view.jsx
+++ b/src/views/messages-view.jsx
@@ -156,6 +156,10 @@ class MessagesView extends React.Component {
       // The user switched to the new topic before the timer for
       // the previous topic has triggered, kill it.
       this.props.readTimerHandler(null);
+    } else if (props.viewportHeight < this.props.viewportHeight) {
+      console.log("Viewport shrunk vertically by", -props.viewportHeight + this.props.viewportHeight);
+      let scrollPosition = Math.max(0, this.state.scrollPosition - props.viewportHeight + this.props.viewportHeight);
+      this.setState({scrollPosition: scrollPosition});
     }
 
     this.setState({
diff --git a/src/views/tinode-web.jsx b/src/views/tinode-web.jsx
index 73c769b2..51130318 100644
--- a/src/views/tinode-web.jsx
+++ b/src/views/tinode-web.jsx
@@ -156,7 +156,10 @@ class TinodeWeb extends React.Component {
     // Window/tab visible or invisible for pausing timers.
     document.addEventListener('visibilitychange', this.handleVisibilityEvent);
 
-    this.setState({viewportWidth: document.documentElement.clientWidth});
+    this.setState({
+      viewportWidth: document.documentElement.clientWidth,
+      viewportHeight: document.documentElement.clientHeight
+    });
 
     this.tinode = TinodeWeb.tnSetup(this.state.serverAddress, this.state.transport);
     this.tinode.onConnect = this.handleConnected;
@@ -230,7 +233,10 @@ class TinodeWeb extends React.Component {
 
   handleResize() {
     var mobile = document.documentElement.clientWidth <= MEDIA_BREAKPOINT;
-    this.setState({viewportWidth: document.documentElement.clientWidth});
+    this.setState({
+      viewportWidth: document.documentElement.clientWidth,
+      viewportHeight: document.documentElement.clientHeight
+    });
     if (this.state.displayMobile != mobile) {
       this.setState({displayMobile: mobile});
     }
@@ -1108,6 +1114,7 @@ class TinodeWeb extends React.Component {
           acs={this.state.topicSelectedAcs}
           displayMobile={this.state.displayMobile}
           viewportWidth={this.state.viewportWidth}
+          viewportHeight={this.state.viewportHeight}
           hideSelf={this.state.displayMobile &&
             (this.state.mobilePanel !== 'topic-view' || this.state.showInfoPanel)}
           topic={this.state.topicSelected}