From 09503e8d6dcaac41a167a20e1805c4a596e6e658 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 30 Jun 2021 13:24:14 +0300
Subject: [PATCH] Fixing VirtualList scrollbar style

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../{virtual-list.scss => virtual-list.module.css}       | 9 +++------
 src/renderer/components/virtual-list/virtual-list.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 8 deletions(-)
 rename src/renderer/components/virtual-list/{virtual-list.scss => virtual-list.module.css} (90%)

diff --git a/src/renderer/components/virtual-list/virtual-list.scss b/src/renderer/components/virtual-list/virtual-list.module.css
similarity index 90%
rename from src/renderer/components/virtual-list/virtual-list.scss
rename to src/renderer/components/virtual-list/virtual-list.module.css
index 9f26247a44..d512d83eb9 100644
--- a/src/renderer/components/virtual-list/virtual-list.scss
+++ b/src/renderer/components/virtual-list/virtual-list.module.css
@@ -19,10 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.VirtualList {
-  overflow: hidden;
-
-  > .list {
-    overflow-y: overlay!important;
-  }
+.list {
+  /* Render scrollbar in content area, preventing to occupy extra space */
+  overflow-y: overlay!important;
 }
\ No newline at end of file
diff --git a/src/renderer/components/virtual-list/virtual-list.tsx b/src/renderer/components/virtual-list/virtual-list.tsx
index c5a32edc43..0cc70f2cd6 100644
--- a/src/renderer/components/virtual-list/virtual-list.tsx
+++ b/src/renderer/components/virtual-list/virtual-list.tsx
@@ -21,7 +21,7 @@
 
 // Wrapper for "react-window" component
 // API docs: https://react-window.now.sh
-import "./virtual-list.scss";
+import styles from "./virtual-list.module.css";
 
 import React, { Component } from "react";
 import { observer } from "mobx-react";
@@ -107,7 +107,7 @@ export class VirtualList extends Component<Props, State> {
         <AutoSizer disableWidth>
           {({ height }) => (
             <VariableSizeList
-              className="list"
+              className={styles.list}
               width={width}
               height={height}
               itemSize={this.getItemSize}