From 245181cf803a9563dfe1842f53dc625578922898 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 17 Jun 2020 22:09:59 -0600
Subject: [PATCH] Fix show less/more button occluding the list automatically

When the user would click 'show more' they would be presented with a 'show less' button that occluded the last room.

Similarly, if they resized the list so that all their rooms would be shown and refreshed the page, they would find their last room covered by the button.

This changes the handling so that showAllClick() sets the height to numTiles + button padding, and adjusts the height calculations on render to deal with relative tiles.

This also removes the conditional padding of the resize handle, as we always occupy the 4px of space. It was leading to rooms getting trimmed slightly by the show N button.
---
 src/components/views/rooms/RoomSublist2.tsx | 21 ++++++++++++---------
 src/stores/room-list/ListLayout.ts          |  8 ++++++--
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index c72e74a1be..04bf4a5a50 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -41,6 +41,11 @@ import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorith
  * warning disappears.                                             *
  *******************************************************************/
 
+const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS
+const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
+
+const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
+
 interface IProps {
     forRooms: boolean;
     rooms?: Room[];
@@ -105,7 +110,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
     };
 
     private onShowAllClick = () => {
-        this.props.layout.visibleTiles = this.numTiles;
+        this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
         this.forceUpdate(); // because the layout doesn't trigger a re-render
     };
 
@@ -393,18 +398,16 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             // goes backwards and can become wildly incorrect (visibleTiles says 18 when there's
             // only mathematically 7 possible).
 
-            const showMoreHeight = 32; // As defined by CSS
-            const resizeHandleHeight = 4; // As defined by CSS
-
             // The padding is variable though, so figure out what we need padding for.
             let padding = 0;
-            if (showNButton) padding += showMoreHeight;
-            if (handles.length > 0) padding += resizeHandleHeight;
+            if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
+            padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
 
-            const minTilesPx = layout.calculateTilesToPixelsMin(tiles.length, layout.minVisibleTiles, padding);
+            const relativeTiles = layout.tilesWithPadding(tiles.length, padding);
+            const minTilesPx = layout.calculateTilesToPixelsMin(relativeTiles, layout.minVisibleTiles, padding);
             const maxTilesPx = layout.tilesToPixelsWithPadding(tiles.length, padding);
-            const tilesWithoutPadding = Math.min(tiles.length, layout.visibleTiles);
-            const tilesPx = layout.calculateTilesToPixelsMin(tiles.length, tilesWithoutPadding, padding);
+            const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
+            const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
 
             content = (
                 <ResizableBox
diff --git a/src/stores/room-list/ListLayout.ts b/src/stores/room-list/ListLayout.ts
index f17001f64e..ebc7b95854 100644
--- a/src/stores/room-list/ListLayout.ts
+++ b/src/stores/room-list/ListLayout.ts
@@ -92,8 +92,12 @@ export class ListLayout {
         return this.tilesToPixels(Math.min(maxTiles, n)) + padding;
     }
 
-    public tilesToPixelsWithPadding(n: number, padding: number): number {
-        return this.tilesToPixels(n) + padding;
+    public tilesWithPadding(n: number, paddingPx: number): number {
+        return this.pixelsToTiles(this.tilesToPixelsWithPadding(n, paddingPx));
+    }
+
+    public tilesToPixelsWithPadding(n: number, paddingPx: number): number {
+        return this.tilesToPixels(n) + paddingPx;
     }
 
     public tilesToPixels(n: number): number {