🎨(scroll): Fix UI issues in theme picker/emoji picker

internal_packages/composer-emoji/lib/emoji-button-popover.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Actions} from 'nylas-exports';
-import {RetinaImg} from 'nylas-component-kit';
+import {RetinaImg, ScrollRegion} from 'nylas-component-kit';
 
 import EmojiStore from './emoji-store';
 import EmojiActions from './emoji-actions';
@@ -296,7 +296,7 @@ class EmojiButtonPopover extends React.Component {
         <div className="emoji-tabs">
           {this.renderTabs()}
         </div>
-        <div
+        <ScrollRegion
           className="emoji-finder-container"
           onScroll={this.onScroll}>
           <div className="emoji-search-container">
@@ -309,14 +309,14 @@ class EmojiButtonPopover extends React.Component {
           </div>
           <canvas
             id="emoji-canvas"
-            width="420"
+            width="400"
             height="2000"
             onMouseDown={this.onMouseDown}
             onMouseOut={this.onMouseOut}
             onMouseMove={this.onHover}
             style={{zoom: "0.5"}}>
           </canvas>
-        </div>
+        </ScrollRegion>
         <div className="emoji-name">
           {this.state.emojiName}
         </div>

internal_packages/composer-emoji/stylesheets/composer-emoji.less

@@ -40,7 +40,11 @@
   }
   .emoji-finder-container {
     height: 232px;
-    overflow: auto;
+    .scrollbar-track {
+      background: transparent;
+      border-left: none;
+      width: 10px;
+    }
     .emoji-search-container {
       padding: @padding-base-vertical * 1.5 @padding-base-horizontal 0;
     }

internal_packages/theme-picker/lib/theme-picker.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Actions from '../../../src/flux/actions'
 
-import {Flexbox, RetinaImg} from 'nylas-component-kit';
+import {Flexbox, RetinaImg, ScrollRegion} from 'nylas-component-kit';
 import ThemeOption from './theme-option';
 
 
@@ -73,14 +73,14 @@ class ThemePicker extends React.Component {
             onMouseDown={() => Actions.closeModal()} />
           <h4 style={{color: "#434648"}}>Themes</h4>
           <div style={{color: "rgba(35, 31, 32, 0.5)", fontSize: "12px"}}>Click any theme to apply:</div>
-          <div style={{margin: "10px 5px 0 5px", height: "290px", overflow: "auto"}}>
+          <ScrollRegion style={{margin: "10px 5px 0 5px", height: "290px"}}>
             <Flexbox
               direction="row"
               height="auto"
               style={{alignItems: "flex-start", flexWrap: "wrap"}}>
               {this._renderThemeOptions()}
             </Flexbox>
-          </div>
+          </ScrollRegion>
           <div className="create-theme">
             <a
               href="https://github.com/nylas/N1-theme-starter"