From 475ba616710e4b32b41d1d96483326ec05c2778b Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 5 Jun 2020 08:48:23 -0600
Subject: [PATCH] Give the show more button some real CSS

This is still somewhat placeholder.
---
 res/css/views/rooms/_RoomSublist2.scss      | 9 +++++++++
 src/components/views/rooms/RoomSublist2.tsx | 3 +--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 4d8c3fffff..da1c23b664 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -38,5 +38,14 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         overflow: hidden;
+
+        .mx_RoomSublist2_showMoreButton {
+            height: 44px; // 1 room tile high
+            cursor: pointer;
+
+            // We create a flexbox to cheat at alignment
+            display: flex;
+            align-items: center;
+        }
     }
 }
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 1a58b67377..90231596fe 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -237,11 +237,10 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
                 // TODO: CSS TBD
                 // TODO: Make this an actual tile
-                const moreTileHeightPx = layout.tileHeight;
                 visibleTiles.splice(visibleTiles.length - 1, 1, (
                     <div
                         onClick={this.onShowAllClick}
-                        style={{height: moreTileHeightPx, lineHeight: moreTileHeightPx, cursor: 'pointer'}}
+                        className='mx_RoomSublist2_showMoreButton'
                         key='showall'
                     >
                         {_t("Show %(n)s more", {n: numMissing})}