From 1d93946733da4d3e8ffb6770cdde079595fdbe3c Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Wed, 29 Oct 2025 10:41:27 +0100 Subject: [PATCH 1/4] feat(room list): remove border between each list item --- res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss | 3 --- 1 file changed, 3 deletions(-) diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss index 06ffe532d7c..c560abd448b 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss @@ -31,9 +31,6 @@ .mx_RoomListItemView_content { height: 100%; flex: 1; - /* The border is only under the room name and the future hover menu */ - border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary); - box-sizing: border-box; min-width: 0; padding-right: var(--cpd-space-5x); From b92530c3cab5d704f28c6e794c42d7f7188c2d89 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 30 Oct 2025 15:20:56 +0100 Subject: [PATCH 2/4] feat(room list): reworked padding between list items --- .../RoomListPanel/_RoomListItemView.pcss | 50 +++++++----- .../views/rooms/RoomListPanel/RoomList.tsx | 3 +- .../rooms/RoomListPanel/RoomListItemView.tsx | 79 ++++++++++--------- 3 files changed, 74 insertions(+), 58 deletions(-) diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss index c560abd448b..f948216f65b 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss @@ -18,42 +18,52 @@ /* Remove button default style */ background: unset; border: none; - padding: 0; text-align: unset; cursor: pointer; - height: 48px; + height: 52px; width: 100%; + padding: 0 var(--cpd-space-2x) var(--cpd-space-1x) var(--cpd-space-2x); - padding-left: var(--cpd-space-3x); font: var(--cpd-font-body-md-regular); - .mx_RoomListItemView_content { - height: 100%; + .mx_RoomListItemView_container { + padding-left: var(--cpd-space-3x); flex: 1; - min-width: 0; - padding-right: var(--cpd-space-5x); + height: 100%; + overflow: hidden; - .mx_RoomListItemView_text { + .mx_RoomListItemView_content { + height: 100%; + flex: 1; min-width: 0; - } + padding-right: var(--cpd-space-5x); - .mx_RoomListItemView_roomName { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .mx_RoomListItemView_text { + min-width: 0; + } - .mx_RoomListItemView_messagePreview { - font: var(--cpd-font-body-sm-regular); - color: var(--cpd-color-text-secondary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + .mx_RoomListItemView_roomName { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .mx_RoomListItemView_messagePreview { + font: var(--cpd-font-body-sm-regular); + color: var(--cpd-color-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } +.mx_RoomListItemView:not([data-index="0"]) { + padding-top: var(--cpd-space-1x); +} + .mx_RoomListItemView_hover { background-color: var(--cpd-color-bg-action-secondary-hovered); } diff --git a/src/components/views/rooms/RoomListPanel/RoomList.tsx b/src/components/views/rooms/RoomListPanel/RoomList.tsx index 4aae621d964..fe8b3c436e3 100644 --- a/src/components/views/rooms/RoomListPanel/RoomList.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomList.tsx @@ -27,8 +27,9 @@ interface RoomListProps { } /** * Height of a single room list item + * 44px (item height) + 4px (top padding) + 4px (bottom padding) = 52px */ -const ROOM_LIST_ITEM_HEIGHT = 48; +const ROOM_LIST_ITEM_HEIGHT = 52; /** * 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, diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx index a18cd337be6..338fb09b23b 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListItemView.tsx @@ -85,13 +85,7 @@ export const RoomListItemView = memo(function RoomListItemView({ - - {/* We truncate the room name when too long. Title here is to show the full name on hover */} -
-
- {vm.name} -
- {vm.messagePreview && ( -
- {vm.messagePreview} + + + {/* We truncate the room name when too long. Title here is to show the full name on hover */} +
+
+ {vm.name}
- )} -
- {showHoverMenu ? ( - (isOpen ? setIsMenuOpen(true) : closeMenu())} - /> - ) : ( - <> - {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */} - {vm.showNotificationDecoration && ( - + {vm.messagePreview && ( +
+ {vm.messagePreview} +
)} - - )} +
+ {showHoverMenu ? ( + (isOpen ? setIsMenuOpen(true) : closeMenu())} + /> + ) : ( + <> + {/* aria-hidden because we summarise the unread count/notification status in a11yLabel variable */} + {vm.showNotificationDecoration && ( + + )} + + )} + ); From 269329a36d00cb58a6630f47dd56bb800ec16e0e Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 30 Oct 2025 15:21:15 +0100 Subject: [PATCH 3/4] feat(filter): increase bottom padding --- res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss b/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss index 378f2e75dab..1e126beee4a 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss @@ -6,7 +6,7 @@ */ .mx_RoomListPrimaryFilters { - padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x); + padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-4x) var(--cpd-space-3x); .mx_RoomListPrimaryFilters_wrapping { display: none; From d3d3a77e433541eb3e184409be8cca4351c9c0ed Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Wed, 29 Oct 2025 10:46:13 +0100 Subject: [PATCH 4/4] feat(room list): improve hover and selection style --- res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss index f948216f65b..86bf62c119a 100644 --- a/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss +++ b/res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss @@ -32,6 +32,7 @@ flex: 1; height: 100%; overflow: hidden; + border-radius: 8px; .mx_RoomListItemView_content { height: 100%;