From d5a3071518a095f19b82d3fb784b6872372ae063 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 10 Jul 2020 18:29:39 +0200
Subject: [PATCH] put show more button inside resizer

this way we have a flexbox layout in the resizer with:
 - the resize handle (fixed)
 - the show more/less button, if any (fixed)
 - the list of tiles (grabbing whatever is left)
---
 res/css/views/rooms/_RoomSublist2.scss      | 20 +++++++++++++++-----
 src/components/views/rooms/RoomSublist2.tsx |  6 ++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 6a77056917..bd00a7fc72 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -186,12 +186,22 @@ limitations under the License.
         flex-direction: column;
         overflow: hidden;
 
+        .mx_RoomSublist2_tiles {
+            flex: 1 0 0;
+            overflow: hidden;
+            // need this to be flex otherwise the overflow hidden from above
+            // sometimes vertically centers the clipped list ... no idea why it would do this
+            // as the box model should be top aligned. Happens in both FF and Chromium
+            display: flex;
+            flex-direction: column;
+        }
+
         .mx_RoomSublist2_resizerHandles_showNButton {
-            position: absolute;
-            bottom: -32px; // height of the button
-            left: 0;
-            right: 0;
-            height: 4px; // height of the handle
+            flex: 0 0 32px;
+        }
+
+        .mx_RoomSublist2_resizerHandles {
+            flex: 0 0 4px;
         }
 
         // Class name comes from the ResizableBox component
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index caa679f1d0..70d65f2437 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -666,9 +666,11 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         className="mx_RoomSublist2_resizeBox"
                         enable={handles}
                     >
-                        {visibleTiles}
+                        <div className="mx_RoomSublist2_tiles">
+                            {visibleTiles}
+                        </div>
+                        {showNButton}
                     </Resizable>
-                    {showNButton}
                 </React.Fragment>
             );
         }