From 2a9f9e38e131c405d166fd003c466b51791fa1dc Mon Sep 17 00:00:00 2001
From: David Langley <davidl@element.io>
Date: Mon, 21 Jul 2025 17:05:44 +0100
Subject: [PATCH] Fix mad merge

---
 .../rooms/RoomListPanel/RoomListItemView.tsx  | 76 +++++++++----------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
index 7760fb911f..a0259d0a6a 100644
--- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
@@ -55,8 +55,7 @@ export const RoomListItemView = memo(function RoomListItemView({
     }, []);
 
     const content = (
-        <Flex
-            as="button"
+        <button
             ref={ref}
             className={classNames("mx_RoomListItemView", {
                 mx_RoomListItemView_hover: showHoverDecoration,
@@ -79,47 +78,48 @@ export const RoomListItemView = memo(function RoomListItemView({
             // We delay the blur event to give time to the focus to move to the menu
             onBlur={() => setIsHoverWithDelay(false, 10)}
             tabIndex={isActive ? 0 : -1}
-            gap="var(--cpd-space-3x)"
-            align="center"
             {...props}
         >
-            <RoomAvatarView room={room} />
-            <Flex
-                className="mx_RoomListItemView_content"
-                gap="var(--cpd-space-2x)"
-                align="center"
-                justify="space-between"
-            >
-                {/* We truncate the room name when too long. Title here is to show the full name on hover */}
-                <div className="mx_RoomListItemView_text">
-                    <div className="mx_RoomListItemView_roomName" title={vm.name}>
-                        {vm.name}
-                    </div>
-                    {vm.messagePreview && (
-                        <div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
-                            {vm.messagePreview}
+            {/* We need this extra div between the button and the content in order to add a padding which is not messing with the virtualized list */}
+            <Flex className="mx_RoomListItemView_container" gap="var(--cpd-space-3x)" align="center">
+                <RoomAvatarView room={room} />
+                <Flex
+                    className="mx_RoomListItemView_content"
+                    gap="var(--cpd-space-2x)"
+                    align="center"
+                    justify="space-between"
+                >
+                    {/* We truncate the room name when too long. Title here is to show the full name on hover */}
+                    <div className="mx_RoomListItemView_text">
+                        <div className="mx_RoomListItemView_roomName" title={vm.name}>
+                            {vm.name}
                         </div>
-                    )}
-                </div>
-                {showHoverMenu ? (
-                    <RoomListItemMenuView
-                        room={room}
-                        setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
-                    />
-                ) : (
-                    <>
-                        {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
-                        {vm.showNotificationDecoration && (
-                            <NotificationDecoration
-                                notificationState={vm.notificationState}
-                                aria-hidden={true}
-                                hasVideoCall={vm.hasParticipantInCall}
-                            />
+                        {vm.messagePreview && (
+                            <div className="mx_RoomListItemView_messagePreview" title={vm.messagePreview}>
+                                {vm.messagePreview}
+                            </div>
                         )}
-                    </>
-                )}
+                    </div>
+                    {showHoverMenu ? (
+                        <RoomListItemMenuView
+                            room={room}
+                            setMenuOpen={(isOpen) => (isOpen ? setIsMenuOpen(true) : closeMenu())}
+                        />
+                    ) : (
+                        <>
+                            {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */}
+                            {vm.showNotificationDecoration && (
+                                <NotificationDecoration
+                                    notificationState={vm.notificationState}
+                                    aria-hidden={true}
+                                    hasVideoCall={vm.hasParticipantInCall}
+                                />
+                            )}
+                        </>
+                    )}
+                </Flex>
             </Flex>
-        </Flex>
+        </button>
     );
 
     if (!vm.showContextMenu) return content;