From 96ac58c9ec713d767e5bf226214d8b540899a364 Mon Sep 17 00:00:00 2001
From: Aaron Gutierrez <gutierrez.aaron.m@gmail.com>
Date: Sat, 29 Dec 2018 11:56:22 -0800
Subject: [PATCH] handle scrollbars

---
 src/components/root.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/root.tsx b/src/components/root.tsx
index 0e4e2fc..901bb04 100644
--- a/src/components/root.tsx
+++ b/src/components/root.tsx
@@ -19,10 +19,19 @@ export class Root extends React.PureComponent<Props, State> {
 
   private imageSetRefs: React.RefObject<ImageSet>[] = [];
 
+  // innerWidth gets messed up when rotating phones from landscape -> portrait,
+  // and chrome seems to not report innerWidth correctly when scrollbars are present
+  private _viewWidth = () =>
+    Math.min(
+      window.innerWidth,
+      window.outerWidth,
+      document.getElementById("mount")!.clientWidth
+    );
+
   state: State = {
     gridHeights: [],
     pageBottom: window.outerHeight + window.pageYOffset,
-    width: window.outerWidth
+    width: this._viewWidth()
   };
 
   componentDidMount() {
@@ -31,6 +40,7 @@ export class Root extends React.PureComponent<Props, State> {
       .then(data => data.json())
       .then(json => this.setState({ data: json }))
       .then(this._loadHash)
+      .then(this._onViewChange)
       .catch(e => console.error("Error fetching data", e));
 
     window.onresize = this._onViewChange;
@@ -94,7 +104,7 @@ export class Root extends React.PureComponent<Props, State> {
   private _onViewChange = () => {
     this.setState({
       pageBottom: window.outerHeight + window.pageYOffset,
-      width: window.outerWidth
+      width: this._viewWidth()
     });
   };