From 2c86938b03926ac4af547c3a2241d5d0b5c8e257 Mon Sep 17 00:00:00 2001
From: vantezzen <hello@vantezzen.io>
Date: Sat, 12 Oct 2019 17:28:32 +0200
Subject: Partly fixing #115

---
 src/features/quickSwitch/Component.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'src/features/quickSwitch')

diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js
index ddbdbe304..7b76553b2 100644
--- a/src/features/quickSwitch/Component.js
+++ b/src/features/quickSwitch/Component.js
@@ -32,7 +32,9 @@ const styles = theme => ({
   },
   services: {
     width: '100%',
+    maxHeight: '50vh',
     marginTop: 30,
+    overflow: 'scroll',
   },
   service: {
     background: theme.styleTypes.primary.contrast,
@@ -89,6 +91,8 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
 
   inputRef = createRef();
 
+  serviceElements = {};
+
   constructor(props) {
     super(props);
 
@@ -150,6 +154,13 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         newSelected = 0;
       }
 
+      // Make sure new selection is visible
+      const serviceElement = this.serviceElements[newSelected];
+      if (serviceElement) {
+        serviceElement.scrollIntoViewIfNeeded(false);
+      }
+
+
       return {
         selected: newSelected,
       };
@@ -244,7 +255,7 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
     return (
       <Modal
         isOpen={isModalVisible}
-        className={classes.modal}
+        className={`${classes.modal} quick-switch`}
         shouldCloseOnOverlayClick
         close={this.close.bind(this)}
       >
@@ -260,9 +271,12 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class
         <div className={classes.services}>
           { services.map((service, index) => (
             <div
-              className={`${classes.service} ${this.state.selected === index ? classes.activeService : ''}`}
+              className={`${classes.service} ${this.state.selected === index ? `${classes.activeService} active` : ''} service`}
               onClick={() => openService(index)}
               key={service.id}
+              ref={(el) => {
+                this.serviceElements[index] = el;
+              }}
             >
               <img
                 src={service.icon}
-- 
cgit v1.2.3-70-g09d2