Fix #559, but don't break GameChooserDrawer

src/components/drawers/GameChooserDrawer.js

@@ -285,9 +285,11 @@ class GameChooserDrawer extends Component {
         return animation !== this.state.animation || show || show !== this.props.show
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        if (this.state.scrollTop !== prevState.scrollTop
-        && this.state.scrollTop !== this.gamesListElement.scrollTop) {
+    async componentDidUpdate(prevProps, prevState) {
+        if (
+            this.state.scrollTop !== prevState.scrollTop
+            && this.state.scrollTop !== this.gamesListElement.scrollTop
+        ) {
             // Update scroll top
 
             this.gamesListElement.scrollTop = this.state.scrollTop
@@ -304,6 +306,8 @@ class GameChooserDrawer extends Component {
         if (!prevProps.show && this.props.show) {
             // Scroll current list element into view
 
+            await this.resize()
+
             let index = this.shownGameTrees.findIndex(([, i]) => i === this.props.gameIndex)
             let scrollTop = 0
             if (index >= 0) scrollTop = this.getRowFromIndex(index) * itemHeight
@@ -339,12 +343,14 @@ class GameChooserDrawer extends Component {
         }
     }
 
-    resize() {
+    async resize() {
         let innerWidth = this.gamesListElement.offsetWidth - 28
         let height = this.gamesListElement.offsetHeight
         let rowCount = Math.floor(innerWidth / itemMinWidth)
 
-        this.setState({innerWidth, height, rowCount})
+        return new Promise(resolve => {
+            this.setState({innerWidth, height, rowCount}, resolve)
+        })
     }
 
     getRowFromIndex(i) {

style/index.css

@@ -748,7 +748,7 @@ header, #bar .bar {
         z-index: 15;
     }
     .drawer.hidecontent > * {
-        visibility: hidden;
+        display: none;
     }
     .drawer.show {
         transform: translateY(-285px);