From 42fe7965d69a393f0e7b1c52822b348d39117695 Mon Sep 17 00:00:00 2001
From: David Langley <langley.dave@gmail.com>
Date: Mon, 6 Oct 2025 18:15:15 +0100
Subject: [PATCH] Room List: Extend the viewport to avoid so many black spots
 when scrolling the room list (#30867)

* Add overscan to avoid so many black spots when scrolling

* increaseViewportBy seems more like what we want

* Use constants and some comments for the magic numebrs.
---
 .../views/rooms/RoomListPanel/RoomList.tsx    | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/views/rooms/RoomListPanel/RoomList.tsx b/src/components/views/rooms/RoomListPanel/RoomList.tsx
index cf72ef4392..4aae621d96 100644
--- a/src/components/views/rooms/RoomListPanel/RoomList.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomList.tsx
@@ -25,7 +25,18 @@ interface RoomListProps {
      */
     vm: RoomListViewState;
 }
-
+/**
+ * Height of a single room list item
+ */
+const ROOM_LIST_ITEM_HEIGHT = 48;
+/**
+ * Amount to extend the top and bottom of the viewport by.
+ * From manual testing and user feedback 25 items is reported to be enough to avoid blank space when using the mouse wheel,
+ * and the trackpad scrolling at a slow to moderate speed where you can still see/read the content.
+ * Using the trackpad to sling through a large percentage of the list quickly will still show blank space.
+ * We would likely need to simplify the item content to improve this case.
+ */
+const EXTENDED_VIEWPORT_HEIGHT = 25 * ROOM_LIST_ITEM_HEIGHT;
 /**
  * A virtualized list of rooms.
  */
@@ -112,13 +123,17 @@ export function RoomList({ vm: { roomsResult, activeIndex } }: RoomListProps): J
             data-testid="room-list"
             role="listbox"
             aria-label={_t("room_list|list_title")}
-            fixedItemHeight={48}
+            fixedItemHeight={ROOM_LIST_ITEM_HEIGHT}
             items={roomsResult.rooms}
             getItemComponent={getItemComponent}
             getItemKey={getItemKey}
             isItemFocusable={() => true}
             onKeyDown={keyDownCallback}
             isScrolling={setIsScrolling}
+            increaseViewportBy={{
+                bottom: EXTENDED_VIEWPORT_HEIGHT,
+                top: EXTENDED_VIEWPORT_HEIGHT,
+            }}
         />
     );
 }