fix scrollbar size

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",

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>
 )

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
         ? {

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"