Attempt to support a hard cutoff with the show more button

Known issues:
* Causes scroll jumps when the button gets added to DOM
* Resize handle is invisible when there's a show more button

TODO:
* Clean up comments
* Clean up useless code (all the padding stuff isn't needed)

res/css/views/rooms/_RoomSublist2.scss

@@ -179,7 +179,6 @@ limitations under the License.
     }
 
     .mx_RoomSublist2_resizeBox {
-        margin-bottom: 4px; // for the resize handle
         position: relative;
 
         // Create another flexbox column for the tiles
@@ -187,65 +186,12 @@ limitations under the License.
         flex-direction: column;
         overflow: hidden;
 
-        .mx_RoomSublist2_showNButton {
+        .mx_RoomSublist2_resizerHandles_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.
-            //
-            // At 24px high, 8px padding on the top and 4px padding on the bottom  this equates to 0.73 of
-            // a tile due to how the padding calculations work.
-            height: 24px;
-            padding-top: 8px;
-            padding-bottom: 4px;
-
-            // 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; // the height of the resize handle
+            bottom: -32px; // height of the button
             left: 0;
             right: 0;
-
+            height: 4px; // height of the handle
-            // We create a flexbox to cheat at alignment
-            display: flex;
-            align-items: center;
-
-            .mx_RoomSublist2_showNButtonChevron {
-                position: relative;
-                width: 16px;
-                height: 16px;
-                margin-left: 12px;
-                margin-right: 18px;
-                mask-position: center;
-                mask-size: contain;
-                mask-repeat: no-repeat;
-                background: $roomtile2-preview-color;
-            }
-
-            .mx_RoomSublist2_showMoreButtonChevron {
-                mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
-            }
-
-            .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
@@ -277,6 +223,56 @@ limitations under the License.
         }
     }
 
+    .mx_RoomSublist2_showNButton {
+        cursor: pointer;
+        font-size: $font-13px;
+        line-height: $font-18px;
+        color: $roomtile2-preview-color;
+
+        // Update the render() function for RoomSublist2 if these change
+        // Update the ListLayout class for minVisibleTiles if these change.
+        //
+        // At 24px high, 8px padding on the top and 4px padding on the bottom  this equates to 0.73 of
+        // a tile due to how the padding calculations work.
+        height: 24px;
+        padding-top: 8px;
+        padding-bottom: 4px;
+
+        // We create a flexbox to cheat at alignment
+        display: flex;
+        align-items: center;
+
+        .mx_RoomSublist2_showNButtonChevron {
+            position: relative;
+            width: 16px;
+            height: 16px;
+            margin-left: 12px;
+            margin-right: 18px;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $roomtile2-preview-color;
+        }
+
+        .mx_RoomSublist2_showMoreButtonChevron {
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        }
+
+        .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);
+        }
+    }
+
     &.mx_RoomSublist2_hasMenuOpen,
     &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
     &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
@@ -322,13 +318,13 @@ limitations under the License.
 
         .mx_RoomSublist2_resizeBox {
             align-items: center;
+        }
 
-            .mx_RoomSublist2_showNButton {
+        .mx_RoomSublist2_showNButton {
-                flex-direction: column;
+            flex-direction: column;
 
-                .mx_RoomSublist2_showNButtonChevron {
+            .mx_RoomSublist2_showNButtonChevron {
-                    margin-right: 12px; // to center
+                margin-right: 12px; // to center
-                }
             }
         }
 

src/components/views/rooms/RoomSublist2.tsx

@@ -119,7 +119,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
     }
 
     private get numVisibleTiles(): number {
-        const nVisible = Math.floor(this.layout.visibleTiles);
+        const nVisible = Math.ceil(this.layout.visibleTiles);
         return Math.min(nVisible, this.numTiles);
     }
 
@@ -635,8 +635,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
             // The padding is variable though, so figure out what we need padding for.
             let padding = 0;
-            if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
+            //if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
-            padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
+            //padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
 
             const relativeTiles = layout.tilesWithPadding(this.numTiles, padding);
             const minTilesPx = layout.calculateTilesToPixelsMin(relativeTiles, layout.minVisibleTiles, padding);
@@ -644,25 +644,32 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
             const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
 
+            const handleWrapperClasses = classNames({
+                'mx_RoomSublist2_resizerHandles': true,
+                'mx_RoomSublist2_resizerHandles_showNButton': !!showNButton,
+            });
+
             const dimensions = {
                 height: tilesPx,
             };
             content = (
-                <Resizable
+                <React.Fragment>
-                    size={dimensions as any}
+                    <Resizable
-                    minHeight={minTilesPx}
+                        size={dimensions as any}
-                    maxHeight={maxTilesPx}
+                        minHeight={minTilesPx}
-                    onResizeStart={this.onResizeStart}
+                        maxHeight={maxTilesPx}
-                    onResizeStop={this.onResizeStop}
+                        onResizeStart={this.onResizeStart}
-                    onResize={this.onResize}
+                        onResizeStop={this.onResizeStop}
-                    handleWrapperClass="mx_RoomSublist2_resizerHandles"
+                        onResize={this.onResize}
-                    handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
+                        handleWrapperClass={handleWrapperClasses}
-                    className="mx_RoomSublist2_resizeBox"
+                        handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
-                    enable={handles}
+                        className="mx_RoomSublist2_resizeBox"
-                >
+                        enable={handles}
-                    {visibleTiles}
+                    >
+                        {visibleTiles}
+                    </Resizable>
                     {showNButton}
-                </Resizable>
+                </React.Fragment>
             );
         }
 

src/stores/room-list/ListLayout.ts

@@ -20,7 +20,8 @@ const TILE_HEIGHT_PX = 44;
 
 // this comes from the CSS where the show more button is
 // mathematically this percent of a tile when floating.
-const RESIZER_BOX_FACTOR = 0.78;
+//const RESIZER_BOX_FACTOR = 0.78;
+const RESIZER_BOX_FACTOR = 0;
 
 interface ISerializedListLayout {
     numTiles: number;