Revert "Merge pull request #4932 from matrix-org/travis/room-list/invisible-show-more"

This reverts commit f58a0a7538.

res/css/views/rooms/_RoomSublist2.scss

@@ -187,16 +187,16 @@ limitations under the License.
         flex-direction: column;
         overflow: hidden;
 
-        .mx_RoomSublist2_placeholder {
-            height: 44px; // Height of a room tile plus margins
-        }
-
         .mx_RoomSublist2_showNButton {
             cursor: pointer;
             font-size: $font-13px;
             line-height: $font-18px;
             color: $roomtile2-preview-color;
 
+            // This is the same color as the left panel background because it needs
+            // to occlude the lastmost tile in the list.
+            background-color: $roomlist2-bg-color;
+
             // Update the render() function for RoomSublist2 if these change
             // Update the ListLayout class for minVisibleTiles if these change.
             //
@@ -209,7 +209,7 @@ limitations under the License.
             // We force this to the bottom so it will overlap rooms as needed.
             // We account for the space it takes up (24px) in the code through padding.
             position: absolute;
-            bottom: 0;
+            bottom: 0; // the height of the resize handle
             left: 0;
             right: 0;
 
@@ -236,6 +236,16 @@ limitations under the License.
             .mx_RoomSublist2_showLessButtonChevron {
                 mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
             }
+
+            &.mx_RoomSublist2_isCutting::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 4px;
+                box-shadow: 0px -2px 3px rgba(46, 47, 50, 0.08);
+            }
         }
 
         // Class name comes from the ResizableBox component

src/components/views/rooms/RoomSublist2.tsx

@@ -562,8 +562,10 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         if (visibleTiles.length > 0) {
             const layout = this.layout; // to shorten calls
 
+            const maxTilesFactored = layout.tilesWithResizerBoxFactor(this.numTiles);
             const showMoreBtnClasses = classNames({
                 'mx_RoomSublist2_showNButton': true,
+                'mx_RoomSublist2_isCutting': this.state.isResizing && layout.visibleTiles < maxTilesFactored,
             });
 
             // If we're hiding rooms, show a 'show more' button to the user. This button
@@ -642,14 +644,6 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
             const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
 
-            // Now that we know our padding constraints, let's find out if we need to chop off the
-            // last rendered visible tile so it doesn't collide with the 'show more' button
-            let visibleUnpaddedTiles = Math.round(layout.visibleTiles - layout.pixelsToTiles(padding));
-            if (visibleUnpaddedTiles === visibleTiles.length - 1) {
-                const placeholder = <div className="mx_RoomSublist2_placeholder" key='placeholder' />;
-                visibleTiles.splice(visibleUnpaddedTiles, 1, placeholder);
-            }
-
             const dimensions = {
                 height: tilesPx,
             };

src/stores/room-list/ListLayout.ts

@@ -109,6 +109,10 @@ export class ListLayout {
         return this.tilesToPixels(Math.min(maxTiles, n)) + padding;
     }
 
+    public tilesWithResizerBoxFactor(n: number): number {
+        return n + RESIZER_BOX_FACTOR;
+    }
+
     public tilesWithPadding(n: number, paddingPx: number): number {
         return this.pixelsToTiles(this.tilesToPixelsWithPadding(n, paddingPx));
     }