From 0fda780eb5006da287ffa5ec5412efda0361aeb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Wed, 20 Jun 2018 16:53:43 +0200
Subject: [PATCH] fix scrollbar size

---
 package.json                            | 1 +
 src/components/base/Ellipsis.js         | 2 +-
 src/components/base/GrowScroll/index.js | 5 ++++-
 yarn.lock                               | 4 ++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8d6c79ed..f044185c 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "invariant": "^2.2.4",
     "lodash": "^4.17.5",
     "lru-cache": "^4.1.3",
+    "measure-scrollbar": "^1.1.0",
     "moment": "^2.22.2",
     "qrcode": "^1.2.0",
     "qrcode-reader": "^1.0.4",
diff --git a/src/components/base/Ellipsis.js b/src/components/base/Ellipsis.js
index 7f105dab..d2b10585 100644
--- a/src/components/base/Ellipsis.js
+++ b/src/components/base/Ellipsis.js
@@ -10,7 +10,7 @@ const innerStyle = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: '
 export default ({ children, canSelect, ...p }: { children: any, canSelect: * }) => (
   <Box grow horizontal>
     <Box grow {...p} style={outerStyle}>
-      <Text style={{ ...innerStyle, 'user-select': canSelect ? 'text' : 'none' }}>{children}</Text>
+      <Text style={{ ...innerStyle, userSelect: canSelect ? 'text' : 'none' }}>{children}</Text>
     </Box>
   </Box>
 )
diff --git a/src/components/base/GrowScroll/index.js b/src/components/base/GrowScroll/index.js
index 4b8de481..4abf5370 100644
--- a/src/components/base/GrowScroll/index.js
+++ b/src/components/base/GrowScroll/index.js
@@ -2,6 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import Box from 'components/base/Box'
+import measureScrollbar from 'measure-scrollbar/commonjs'
 
 type Props = {
   children: any,
@@ -11,6 +12,8 @@ type Props = {
 
 export const GrowScrollContext = React.createContext()
 
+const scrollbarWidth = measureScrollbar()
+
 class GrowScroll extends PureComponent<Props> {
   static defaultProps = {
     full: false,
@@ -47,7 +50,7 @@ class GrowScroll extends PureComponent<Props> {
 
     const scrollContainerStyles = {
       overflowY: 'scroll',
-      marginRight: `-80px`,
+      marginRight: `-${80 + scrollbarWidth}px`,
       paddingRight: `80px`,
       ...(maxHeight
         ? {
diff --git a/yarn.lock b/yarn.lock
index 229560e6..7e315c02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9322,6 +9322,10 @@ meant@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/meant/-/meant-1.0.1.tgz#66044fea2f23230ec806fb515efea29c44d2115d"
 
+measure-scrollbar@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/measure-scrollbar/-/measure-scrollbar-1.1.0.tgz#986890d22866255ec5b212480f097c55a82d1231"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"