From 71c59eff2c439922bbc73b048d23f61023eb2275 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 3 Nov 2017 11:19:29 +0000
Subject: [PATCH] Add a GeminiScrollbar to Your Communities

---
 src/components/structures/MyGroups.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index b6a450fbb4..cc4783fdac 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import GeminiScrollbar from 'react-gemini-scrollbar';
 import {MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../index';
 import { _t, _tJsx } from '../../languageHandler';
 import withMatrixClient from '../../wrappers/withMatrixClient';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import dis from '../../dispatcher';
-import PropTypes from 'prop-types';
 import Modal from '../../Modal';
 
 import FlairStore from '../../stores/FlairStore';
@@ -115,18 +116,17 @@ export default withMatrixClient(React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let content;
+        let contentHeader;
         if (this.state.groups) {
             const groupNodes = [];
             this.state.groups.forEach((g) => {
                 groupNodes.push(<GroupTile groupId={g} />);
             });
+            contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <div>
-                    <h3>{ _t('Your Communities') }</h3>
-                    <div className="mx_MyGroups_joinedGroups">
-                        { groupNodes }
-                    </div>
-                </div> :
+                <GeminiScrollbar className="mx_MyGroups_joinedGroups">
+                    { groupNodes }
+                </GeminiScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",
@@ -176,6 +176,7 @@ export default withMatrixClient(React.createClass({
                 </div>
             </div>
             <div className="mx_MyGroups_content">
+                { contentHeader }
                 { content }
             </div>
         </div>;