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,16 +186,49 @@ limitations under the License.
         flex-direction: column;
         overflow: hidden;
 
+        .mx_RoomSublist2_resizerHandles_showNButton {
+            position: absolute;
+            bottom: -32px; // height of the button
+            left: 0;
+            right: 0;
+            height: 4px; // height of the handle
+        }
+
+        // Class name comes from the ResizableBox component
+        // The hover state needs to use the whole sublist, not just the resizable box,
+        // so that selector is below and one level higher.
+        .mx_RoomSublist2_resizerHandle {
+            cursor: ns-resize;
+            border-radius: 3px;
+
+            // Override styles from library
+            width: unset !important;
+            height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
+
+            // This is positioned directly below the 'show more' button.
+            position: absolute;
+            bottom: 0 !important; // override from library
+
+            // Together, these make the bar 64px wide
+            // These are also overridden from the library
+            left: calc(50% - 32px) !important;
+            right: calc(50% - 32px) !important;
+        }
+
+        &:hover, &.mx_RoomSublist2_hasMenuOpen {
+            .mx_RoomSublist2_resizerHandle {
+                opacity: 0.8;
+                background-color: $primary-fg-color;
+            }
+        }
+    }
+
     .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.
         //
@@ -206,13 +238,6 @@ limitations under the License.
         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
-            left: 0;
-            right: 0;
-
         // We create a flexbox to cheat at alignment
         display: flex;
         align-items: center;
@@ -248,35 +273,6 @@ limitations under the License.
         }
     }
 
-        // Class name comes from the ResizableBox component
-        // The hover state needs to use the whole sublist, not just the resizable box,
-        // so that selector is below and one level higher.
-        .mx_RoomSublist2_resizerHandle {
-            cursor: ns-resize;
-            border-radius: 3px;
-
-            // Override styles from library
-            width: unset !important;
-            height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
-
-            // This is positioned directly below the 'show more' button.
-            position: absolute;
-            bottom: 0 !important; // override from library
-
-            // Together, these make the bar 64px wide
-            // These are also overridden from the library
-            left: calc(50% - 32px) !important;
-            right: calc(50% - 32px) !important;
-        }
-
-        &:hover, &.mx_RoomSublist2_hasMenuOpen {
-            .mx_RoomSublist2_resizerHandle {
-                opacity: 0.8;
-                background-color: $primary-fg-color;
-            }
-        }
-    }
-
     &.mx_RoomSublist2_hasMenuOpen,
     &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
     &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
@@ -322,6 +318,7 @@ limitations under the License.
 
         .mx_RoomSublist2_resizeBox {
             align-items: center;
+        }
 
         .mx_RoomSublist2_showNButton {
             flex-direction: column;
@@ -330,7 +327,6 @@ limitations under the License.
                 margin-right: 12px; // to center
             }
         }
-        }
 
         .mx_RoomSublist2_menuButton {
             height: 16px;

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,10 +644,16 @@ 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 = (
+                <React.Fragment>
                     <Resizable
                         size={dimensions as any}
                         minHeight={minTilesPx}
@@ -655,14 +661,15 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                         onResizeStart={this.onResizeStart}
                         onResizeStop={this.onResizeStop}
                         onResize={this.onResize}
-                    handleWrapperClass="mx_RoomSublist2_resizerHandles"
+                        handleWrapperClass={handleWrapperClasses}
                         handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
                         className="mx_RoomSublist2_resizeBox"
                         enable={handles}
                     >
                         {visibleTiles}
-                    {showNButton}
                     </Resizable>
+                    {showNButton}
+                </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;