diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 30e897e5dc..2b5b3d5353 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -31,7 +31,6 @@ import GroupStoreCache from '../../stores/GroupStoreCache';
 import GroupStore from '../../stores/GroupStore';
 import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import {makeGroupPermalink, makeUserPermalink} from "../../matrix-to";
 
 const LONG_DESC_PLACEHOLDER = _td(
@@ -969,6 +968,7 @@ export default React.createClass({
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Spinner = sdk.getComponent("elements.Spinner");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
             return <Spinner />;
@@ -1119,9 +1119,9 @@ export default React.createClass({
                             { rightButtons }
                         </div>
                     </div>
-                    <GeminiScrollbar className="mx_GroupView_body">
+                    <GeminiScrollbarWrapper className="mx_GroupView_body">
                         { bodyNodes }
-                    </GeminiScrollbar>
+                    </GeminiScrollbarWrapper>
                 </div>
             );
         } else if (this.state.error) {
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index da7bebd16a..7a93cfb886 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import sdk from '../../index';
 import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
@@ -63,6 +62,8 @@ export default withMatrixClient(React.createClass({
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const GroupTile = sdk.getComponent("groups.GroupTile");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+
 
         let content;
         let contentHeader;
@@ -73,7 +74,7 @@ export default withMatrixClient(React.createClass({
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <GeminiScrollbar>
+                <GeminiScrollbarWrapper>
                     <div className="mx_MyGroups_microcopy">
                         <p>
                             { _t(
@@ -92,7 +93,7 @@ export default withMatrixClient(React.createClass({
                     <div className="mx_MyGroups_joinedGroups">
                         { groupNodes }
                     </div>
-                </GeminiScrollbar> :
+                </GeminiScrollbarWrapper> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index cbb6001d5f..722dc2251f 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -17,7 +17,6 @@ limitations under the License.
 const React = require("react");
 const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
-const GeminiScrollbar = require('react-gemini-scrollbar');
 import Promise from 'bluebird';
 import { KeyCode } from '../../Keyboard';
 
@@ -669,10 +668,11 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
-        return (<GeminiScrollbar autoshow={true} ref="geminiPanel"
+        return (<GeminiScrollbarWrapper autoshow={true} ref="geminiPanel"
                 onScroll={this.onScroll} onResize={this.onResize}
                 className={this.props.className} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
@@ -680,7 +680,7 @@ module.exports = React.createClass({
                             { this.props.children }
                         </ol>
                     </div>
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
                );
     },
 });
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 7a187e4298..790c497a67 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import TagOrderStore from '../../stores/TagOrderStore';
 
 import GroupActions from '../../actions/GroupActions';
@@ -102,6 +101,8 @@ const TagPanel = React.createClass({
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -124,7 +125,7 @@ const TagPanel = React.createClass({
                 { clearButton }
             </AccessibleButton>
             <div className="mx_TagPanel_divider" />
-            <GeminiScrollbar
+            <GeminiScrollbarWrapper
                 className="mx_TagPanel_scroller"
                 autoshow={true}
                 // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
@@ -145,7 +146,7 @@ const TagPanel = React.createClass({
                             </div>
                     ) }
                 </Droppable>
-            </GeminiScrollbar>
+            </GeminiScrollbarWrapper>
             <div className="mx_TagPanel_divider" />
             <div className="mx_TagPanel_createGroupButton">
                 <GroupsButton tooltip={true} />
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index f6629b4b09..85223c4eef 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -30,7 +30,6 @@ import Promise from 'bluebird';
 const packageJson = require('../../../package.json');
 const UserSettingsStore = require('../../UserSettingsStore');
 const CallMediaHandler = require('../../CallMediaHandler');
-const GeminiScrollbar = require('react-gemini-scrollbar');
 const Email = require('../../email');
 const AddThreepid = require('../../AddThreepid');
 const SdkConfig = require('../../SdkConfig');
@@ -1118,6 +1117,7 @@ module.exports = React.createClass({
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
         const Notifications = sdk.getComponent("settings.Notifications");
         const EditableText = sdk.getComponent('elements.EditableText');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         const avatarUrl = (
             this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
@@ -1213,8 +1213,9 @@ module.exports = React.createClass({
                     onCancelClick={this.props.onClose}
                 />
 
-                <GeminiScrollbar className="mx_UserSettings_body"
-                                 autoshow={true}>
+                <GeminiScrollbarWrapper
+                    className="mx_UserSettings_body"
+                    autoshow={true}>
 
                 <h3>{ _t("Profile") }</h3>
 
@@ -1327,7 +1328,7 @@ module.exports = React.createClass({
 
                 { this._renderDeactivateAccount() }
 
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index 26aa5d3ecb..07f8b6187f 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -146,6 +146,7 @@ export default React.createClass({
     },
 
     render: function() {
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         if (this.props.devices === null) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return <Spinner />;
@@ -191,7 +192,7 @@ export default React.createClass({
                 title={_t('Room contains unknown devices')}
                 contentId='mx_Dialog_content'
             >
-                <GeminiScrollbar autoshow={false} className="mx_Dialog_content" id='mx_Dialog_content'>
+                <GeminiScrollbarWrapper autoshow={false} className="mx_Dialog_content" id='mx_Dialog_content'>
                     <h4>
                         { _t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name}) }
                     </h4>
@@ -199,7 +200,7 @@ export default React.createClass({
                     { _t("Unknown devices") }:
 
                     <UnknownDeviceList devices={this.props.devices} />
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
                 <DialogButtons primaryButton={sendButtonLabel}
                     onPrimaryButtonClick={sendButtonOnClick}
                     onCancel={this._onDismissClicked} />
diff --git a/src/components/views/elements/GeminiScrollbarWrapper.js b/src/components/views/elements/GeminiScrollbarWrapper.js
new file mode 100644
index 0000000000..1de82bebc2
--- /dev/null
+++ b/src/components/views/elements/GeminiScrollbarWrapper.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2018 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+class GeminiScrollbarWrapper extends React.Component {
+    render() {
+        // Enable forceGemini so that gemini is always enabled. This is
+        // to avoid future issues where a feature is implemented without
+        // doing QA on every OS/browser combination.
+        //
+        // By default GeminiScrollbar allows native scrollbars to be used
+        // on macOS. Use forceGemini to enable Gemini's non-native
+        // scrollbars on all OSs.
+        return <GeminiScrollbar forceGemini={true} {...this.props}>
+            { this.props.children }
+        </GeminiScrollbar>;
+    }
+}
+
+export default GeminiScrollbarWrapper;
+
diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js
index 097fb1f7db..4970a26e5b 100644
--- a/src/components/views/groups/GroupMemberInfo.js
+++ b/src/components/views/groups/GroupMemberInfo.js
@@ -25,7 +25,6 @@ import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
 import AccessibleButton from '../elements/AccessibleButton';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 
 module.exports = React.createClass({
     displayName: 'GroupMemberInfo',
@@ -180,9 +179,10 @@ module.exports = React.createClass({
         );
 
         const EmojiText = sdk.getComponent('elements.EmojiText');
+        const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
         return (
             <div className="mx_MemberInfo">
-                <GeminiScrollbar autoshow={true}>
+                <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
                         <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
@@ -199,7 +199,7 @@ module.exports = React.createClass({
                     </div>
 
                     { adminTools }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 71c168f5e6..17a91d83fa 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -18,7 +18,6 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import PropTypes from 'prop-types';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
@@ -134,6 +133,7 @@ export default React.createClass({
     },
 
     render: function() {
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         if (this.state.fetching || this.state.fetchingInvitedMembers) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return (<div className="mx_MemberList">
@@ -162,10 +162,10 @@ export default React.createClass({
         return (
             <div className="mx_MemberList">
                 { inputBox }
-                <GeminiScrollbar autoshow={true} className="mx_MemberList_outerWrapper">
+                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_outerWrapper">
                     { joined }
                     { invited }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js
index fa4ed89ae0..2d2b4e655c 100644
--- a/src/components/views/groups/GroupRoomInfo.js
+++ b/src/components/views/groups/GroupRoomInfo.js
@@ -22,7 +22,6 @@ import Modal from '../../../Modal';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 
 module.exports = React.createClass({
     displayName: 'GroupRoomInfo',
@@ -157,6 +156,7 @@ module.exports = React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         if (this.state.groupRoomRemoveLoading || !this.state.groupRoom) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return <div className="mx_MemberInfo">
@@ -216,7 +216,7 @@ module.exports = React.createClass({
         const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
         return (
             <div className="mx_MemberInfo">
-                <GeminiScrollbar autoshow={true}>
+                <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
                         <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
@@ -233,7 +233,7 @@ module.exports = React.createClass({
                     </div>
 
                     { adminTools }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/groups/GroupRoomList.js b/src/components/views/groups/GroupRoomList.js
index 189fa944e2..0515865c6b 100644
--- a/src/components/views/groups/GroupRoomList.js
+++ b/src/components/views/groups/GroupRoomList.js
@@ -17,7 +17,6 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import PropTypes from 'prop-types';
 
 const INITIAL_LOAD_NUM_ROOMS = 30;
@@ -120,16 +119,17 @@ export default React.createClass({
             </form>
         );
 
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return (
             <div className="mx_GroupRoomList">
                 { inputBox }
-                <GeminiScrollbar autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
+                <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
                             createOverflowElement={this._createOverflowTile}>
                         { this.makeGroupRoomTiles(this.state.searchQuery) }
                     </TruncatedList>
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index c449ad2683..2789c0e4cd 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -39,7 +39,6 @@ import Unread from '../../../Unread';
 import { findReadReceiptFromUserId } from '../../../utils/Receipt';
 import withMatrixClient from '../../../wrappers/withMatrixClient';
 import AccessibleButton from '../elements/AccessibleButton';
-import GeminiScrollbar from 'react-gemini-scrollbar';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SdkConfig from '../../../SdkConfig';
 
@@ -897,11 +896,12 @@ module.exports = withMatrixClient(React.createClass({
             </div>;
         }
 
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <GeminiScrollbar autoshow={true}>
+                <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
@@ -925,7 +925,7 @@ module.exports = withMatrixClient(React.createClass({
                     { this._renderDevices() }
 
                     { spinner }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js
index 620cfe33fc..3dfcd38cbd 100644
--- a/src/components/views/rooms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -21,7 +21,6 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const sdk = require('../../../index');
-const GeminiScrollbar = require('react-gemini-scrollbar');
 const rate_limited_func = require('../../../ratelimitedfunc');
 const CallHandler = require("../../../CallHandler");
 
@@ -395,6 +394,7 @@ module.exports = React.createClass({
 
     render: function() {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         let invitedSection = null;
         if (this._getChildCountInvited() > 0) {
@@ -423,14 +423,14 @@ module.exports = React.createClass({
         return (
             <div className="mx_MemberList">
                 { inputBox }
-                <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
+                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
                     <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAtJoined}
                             createOverflowElement={this._createOverflowTileJoined}
                             getChildren={this._getChildrenJoined}
                             getChildCount={this._getChildCountJoined}
                     />
                     { invitedSection }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             </div>
         );
     },
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index 6ccf04c5d8..ef1a3adc1d 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -20,7 +20,6 @@ const React = require("react");
 const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-const GeminiScrollbar = require('react-gemini-scrollbar');
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const CallHandler = require('../../../CallHandler');
 const dis = require("../../../dispatcher");
@@ -351,7 +350,7 @@ module.exports = React.createClass({
 
                 return Boolean(isRoomVisible[taggedRoom.roomId]);
             });
-            
+
             if (filteredRooms.length > 0 || tagName.match(STANDARD_TAGS_REGEX)) {
                 filteredLists[tagName] = filteredRooms;
             }
@@ -601,10 +600,11 @@ module.exports = React.createClass({
 
     render: function() {
         const RoomSubList = sdk.getComponent('structures.RoomSubList');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         const self = this;
         return (
-            <GeminiScrollbar className="mx_RoomList_scrollbar"
+            <GeminiScrollbarWrapper className="mx_RoomList_scrollbar"
                  autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
             <div className="mx_RoomList">
                 <RoomSubList list={[]}
@@ -711,7 +711,7 @@ module.exports = React.createClass({
                              searchFilter={self.props.searchFilter}
                              onShowMoreRooms={self.onShowMoreRooms} />
             </div>
-            </GeminiScrollbar>
+            </GeminiScrollbarWrapper>
         );
     },
 });
diff --git a/src/components/views/rooms/SearchableEntityList.js b/src/components/views/rooms/SearchableEntityList.js
index ff75524a5d..321f365da7 100644
--- a/src/components/views/rooms/SearchableEntityList.js
+++ b/src/components/views/rooms/SearchableEntityList.js
@@ -19,7 +19,6 @@ const MatrixClientPeg = require("../../../MatrixClientPeg");
 const Modal = require("../../../Modal");
 const sdk = require("../../../index");
 import { _t } from '../../../languageHandler';
-const GeminiScrollbar = require('react-gemini-scrollbar');
 
 // A list capable of displaying entities which conform to the SearchableEntity
 // interface which is an object containing getJsx(): Jsx and matches(query: string): boolean
@@ -164,11 +163,12 @@ const SearchableEntityList = React.createClass({
                     </div>
                 );
             }
+            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
             list = (
-                <GeminiScrollbar autoshow={true}
+                <GeminiScrollbarWrapper autoshow={true}
                                  className="mx_SearchableEntityList_listWrapper">
                     { list }
-                </GeminiScrollbar>
+                </GeminiScrollbarWrapper>
             );
         }