diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png index 0510570c85..ba4073bf09 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png index 62a6db0401..12048813df 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png index 3396e4d7af..2a850f5e99 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png index aea65dfd2e..fd1120aa7c 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png index c91eaae678..7b9973f487 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png index 33a58c0186..b235e1a72a 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png new file mode 100644 index 0000000000..f599788971 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png index f550ca61ae..de5f516bcf 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png index aa8b1f52fb..62c553edbe 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png index 4cd7639e8d..26e1a5e5bd 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png index c91eaae678..7b9973f487 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png index d59c818760..fe51dfb812 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png index c680323a32..0f8989132a 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png index c91eaae678..7b9973f487 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png index 95078643c6..df13e5126b 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-container-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-container-auto.png index 08f95e5684..eebc676a3f 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-container-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-container-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-with-active-wrapping-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-with-active-wrapping-filter-auto.png index a9d71aeb4f..9624b0962e 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-with-active-wrapping-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/narrow-with-active-wrapping-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png index 44c69d4b65..77e432e5fe 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png index 980c20f8f5..efc145fd13 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png index 65f8c7b203..4ff4c26a32 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png index 6b342ecc84..36534ef8e0 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png index f6e995e46b..05f9b0de7b 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-invites-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png index af7e857088..f287fd9522 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png index a654ab1e94..4e809d714c 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-mentions-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png index 1ff8fed3ea..4b888cb2f7 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-people-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png index 5a6cbf6cae..0dd3c6a2d0 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-rooms-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png index 2d829787b2..3d67b17fbc 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-unread-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png index fac07b40c4..79fd4ce609 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png index 980c20f8f5..efc145fd13 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png index bace5dba52..162f1c48d9 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png index dd4d0a4bac..ce6e59ee67 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-list-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png index c8087956e2..be04cac776 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png index ba35806f60..a174a3d93d 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/default-auto.png index 0447c2d348..99366a8a41 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css index 0ed647c777..56490fdb97 100644 --- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css +++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css @@ -6,8 +6,13 @@ */ .header { - flex: 0 0 60px; - padding: 0 var(--cpd-space-3x); + min-height: 60px; + padding: 0 var(--cpd-space-4x) 0 var(--cpd-space-3x); +} + +.container { + flex: 1; + padding-bottom: var(--cpd-space-3x); } .title { diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx index 5b75de23b5..90998da655 100644 --- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx +++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx @@ -130,30 +130,33 @@ export function RoomListHeaderView({ vm }: Readonly): J as="header" className={styles.header} aria-label={_t("room|context_menu|title")} - justify="space-between" - align="center" + align="end" data-testid="room-list-header" > - -

- {title} -

- {displaySpaceMenu && } - - - + + +

+ {title} +

+ {displaySpaceMenu && } + + + - {/* If we don't display the compose menu, it means that the user can only send DM */} - {displayComposeMenu ? ( - - ) : ( - vm.createChatRoom(e.nativeEvent)} - tooltip={_t("action|new_conversation")} - > - - - )} + {/* If we don't display the compose menu, it means that the user can only send DM */} + {displayComposeMenu ? ( + + ) : ( + vm.createChatRoom(e.nativeEvent)} + tooltip={_t("action|new_conversation")} + > + + + )} + ); diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap index bd1cb09e56..9aeef5522c 100644 --- a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap +++ b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap @@ -6,123 +6,128 @@ exports[`RoomListHeaderView > renders the default state 1`] = ` aria-label="Room options" class="flex header" data-testid="room-list-header" - style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" + style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" >
-

- Rooms -

- -
-
-
- - + +
- - + + + +
+ + + @@ -134,118 +139,123 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = ` aria-label="Room options" class="flex header" data-testid="room-list-header" - style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" + style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" >
-

- Rooms -

- -
-
-
- - + +
- - + + + +
+ + + @@ -257,92 +267,97 @@ exports[`RoomListHeaderView > renders without space menu 1`] = ` aria-label="Room options" class="flex header" data-testid="room-list-header" - style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" + style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;" >
-

- Rooms -

-
-
- -
+
- - + + + +
+ + + diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx index 1da96cf3e4..c7faf630ca 100644 --- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx +++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx @@ -45,8 +45,8 @@ export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element { title={_t("action|open_menu")} align="start" trigger={ - // 36px button with a 24px icon - + // 28px button with a 20px icon + } diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap index 01097e411a..d269845351 100644 --- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap +++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap @@ -12,7 +12,7 @@ exports[` > should match snapshot 1`] = ` data-state="closed" id="radix-_r_0_" role="button" - style="--cpd-icon-button-size: 36px; padding: 6px;" + style="--cpd-icon-button-size: 28px; padding: 4px;" tabindex="0" type="button" > diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx index 10f7df2414..bcdb560cd2 100644 --- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx +++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx @@ -54,6 +54,7 @@ export function RoomListItemMoreOptionsMenu({ vm }: RoomListItemMoreOptionsMenuP tooltip={_t("room_list|room|more_options")} aria-label={_t("room_list|room|more_options")} size="24px" + style={{ padding: "2px" }} > diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx index 1011bac4ff..e02e2a4ee3 100644 --- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx +++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx @@ -51,6 +51,7 @@ export function RoomListItemNotificationMenu({ vm }: RoomListItemNotificationMen trigger={ diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css index 008a4462ac..108180ed60 100644 --- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css +++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css @@ -5,15 +5,6 @@ * Please see LICENSE files in the repository root for full details. */ -/** - * The RoomListItem has the following structure: - * button--------------------------------------------------| - * | <-12px-> container------------------------------------| - * | | room avatar <-8px-> content----------------| - * | | | room_name <- 20px ->| - * | | | --------------------| <-- border - * |-------------------------------------------------------| - */ .roomListItem { /* Remove button default style */ background: unset; @@ -21,13 +12,17 @@ padding: 0; text-align: unset; + /* Needed to position the selected marker */ + position: relative; cursor: pointer; - height: 48px; + height: 44px; width: 100%; + /* Gap between items, accounted for in ROOM_LIST_ITEM_HEIGHT */ + margin-bottom: var(--cpd-space-2x); - padding-left: var(--cpd-space-3x); font: var(--cpd-font-body-md-regular); - color: var(--cpd-color-text-primary); + letter-spacing: var(--cpd-font-letter-spacing-body-md); + color: var(--cpd-color-text-secondary); /* Hide the menu by default */ .hoverMenu { @@ -42,7 +37,16 @@ .roomListItem[data-state="open"], /* When the options and notifications menu are opened */ .roomListItem:has(.hoverMenu > button[data-state="open"]) { - background-color: var(--cpd-color-bg-action-secondary-hovered); + color: var(--cpd-color-text-primary); + + .container { + background-color: var(--cpd-color-bg-action-tertiary-hovered); + } + + /* Preserve selected background on hover/focus/menu-open states */ + &.selected .container { + background-color: var(--cpd-color-bg-action-tertiary-selected); + } .hoverMenu { display: flex; @@ -52,52 +56,57 @@ .notificationDecoration { display: none; } +} - /** - * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331 - * the icon size of the menu is 18px instead of 20px with a different internal padding - * We need to use 18px to align the icon with the others icons - * 18px is not available in compound spacing - */ - .content { - padding-right: 18px; - } +.container { + flex: 1; + height: 100%; + margin: 0 var(--cpd-space-3x); + padding: 0 var(--cpd-space-2x); + border-radius: 8px; + min-width: 0; } .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); } .text { min-width: 0; } +.ellipsis, .roomName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.messagePreview { - font: var(--cpd-font-body-sm-regular); - color: var(--cpd-color-text-secondary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - .selected { - background-color: var(--cpd-color-bg-action-secondary-pressed); + .container { + background-color: var(--cpd-color-bg-action-tertiary-selected); + font: var(--cpd-font-body-md-semibold); + color: var(--cpd-color-text-primary); + } + + /* Visual marker at the left on the container when the room is selected */ + .container::before { + content: ""; + position: absolute; + /* Marker height is 34px, room list item height is 44px. So position is at 5px and top and bottom */ + top: 5px; + bottom: 5px; + left: 0; + width: 4px; + background-color: var(--cpd-color-bg-accent-rest); + border-radius: 0 8px 8px 0; + } } .bold .roomName { font: var(--cpd-font-body-md-semibold); + color: var(--cpd-color-text-primary); } /* Set icon color for hover menu buttons */ diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx index dc2428d823..22a4ae0cea 100644 --- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx +++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx @@ -102,7 +102,7 @@ const meta = { parameters: { design: { type: "figma", - url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel?node-id=101-13062", + url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=10800-21153&t=gFDc2D7TMEffSSCo-0", }, }, } satisfies Meta; @@ -112,6 +112,13 @@ type Story = StoryObj; export const Default: Story = {}; +export const LongContent: Story = { + args: { + name: "Loooooooooooooooooooooooooooooooooooooong name", + messagePreview: "Loooooooooooooooooooooooooooooooooooooong preview", + }, +}; + export const Selected: Story = { args: { isSelected: true, diff --git a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx index e4da17e3ee..9a06b67cea 100644 --- a/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx +++ b/packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx @@ -7,6 +7,7 @@ import React, { type JSX, memo, useEffect, useRef, type ReactNode } from "react"; import classNames from "classnames"; +import { Text } from "@vector-im/compound-web"; import { Flex } from "../../utils/Flex"; import { NotificationDecoration, type NotificationDecorationData } from "./NotificationDecoration"; @@ -174,31 +175,33 @@ export const RoomListItemView = memo(function RoomListItemView({ tabIndex={isFocused ? 0 : -1} {...props} > - {renderAvatar(item.room)} - - {/* We truncate the room name when too long. Title here is to show the full name on hover */} -
-
- {item.name} -
- {item.messagePreview && ( -
- {item.messagePreview} + + {renderAvatar(item.room)} + + {/* We truncate the room name when too long. Title here is to show the full name on hover */} +
+
+ {item.name}
+ {item.messagePreview && ( + + {item.messagePreview} + + )} +
+ {(item.showMoreOptionsMenu || item.showNotificationMenu) && ( + )} -
- {(item.showMoreOptionsMenu || item.showNotificationMenu) && ( - - )} - {/* aria-hidden because we summarise the unread count/notification status in a11yLabel */} -
- -
+ {/* aria-hidden because we summarise the unread count/notification status in a11yLabel */} +
+ +
+ ); diff --git a/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap index ff1ccad613..62fc0dff69 100644 --- a/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap +++ b/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap @@ -23,106 +23,111 @@ exports[` > renders Bold story 1`] = ` type="button" >
- GE -
-
- - +
+
+ + +
+ -
@@ -153,106 +158,111 @@ exports[` > renders Default story 1`] = ` type="button" >
- GE -
-
- - +
+
+ + +
+ -
@@ -283,122 +293,127 @@ exports[` > renders Invitation story 1`] = ` type="button" >
- GE -
-
-
+
+ + +
+ -
@@ -431,100 +446,105 @@ exports[` > renders NoMessagePreview story 1`] = ` type="button" >
- GE -
-
+
- General +
+ General +
-
-
- - +
- + + + +
+ +
+ - @@ -555,106 +575,111 @@ exports[` > renders Selected story 1`] = ` type="button" >
- GE -
-
- - +
+
+ + +
+ -
@@ -685,122 +710,127 @@ exports[` > renders UnsentMessage story 1`] = ` type="button" >
- GE -
-
-
+
+ + +
+ -
@@ -833,106 +863,111 @@ exports[` > renders WithHoverMenu story 1`] = ` type="button" >
- GE -
-
- - +
+
+ + +
+ -
@@ -963,127 +998,132 @@ exports[` > renders WithMention story 1`] = ` type="button" >
- GE -
-
-
+
+ + +
+ -
@@ -1116,116 +1156,121 @@ exports[` > renders WithNotification story 1`] = ` type="button" >
- GE -
-
- - -
- +
+ + +
+
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css index 29db6d1bd6..7bb7cd8006 100644 --- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css +++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css @@ -6,7 +6,7 @@ */ .roomListPrimaryFilters { - padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x); + padding: 0 var(--cpd-space-4x) var(--cpd-space-5x) var(--cpd-space-3x); } /* Hide filters that are wrapping when collapsed */ diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx index 15237eed7e..fcafa06124 100644 --- a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx +++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx @@ -34,7 +34,7 @@ const { const renderWithMockContext = (component: React.ReactElement): ReturnType => { return render(component, { wrapper: ({ children }) => ( - + {children} ), diff --git a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap index c518632039..fdafa30c4d 100644 --- a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap +++ b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap @@ -76,7 +76,7 @@ exports[` > renders Default story 1`] = `
+
+ + +
+ - @@ -220,7 +225,7 @@ exports[` > renders Default story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -840,7 +870,7 @@ exports[` > renders Default story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
+
+ + +
+ - @@ -1466,7 +1521,7 @@ exports[` > renders Default story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -2086,7 +2166,7 @@ exports[` > renders Default story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + - @@ -2708,7 +2808,7 @@ exports[` > renders EmptyFavouriteFilter story 1`] = `
@@ -2767,7 +2867,7 @@ exports[` > renders EmptyInvitesFilter story 1`] = `
@@ -2830,7 +2930,7 @@ exports[` > renders EmptyLowPriorityFilter story 1`] = `
@@ -2893,7 +2993,7 @@ exports[` > renders EmptyMentionsFilter story 1`] = `
@@ -2956,7 +3056,7 @@ exports[` > renders EmptyPeopleFilter story 1`] = `
@@ -3015,7 +3115,7 @@ exports[` > renders EmptyRoomsFilter story 1`] = `
@@ -3074,7 +3174,7 @@ exports[` > renders EmptyUnreadFilter story 1`] = `
@@ -3297,12 +3397,12 @@ exports[` > renders LargeList story 1`] = ` >
+
+ + +
+ -
@@ -3446,7 +3551,7 @@ exports[` > renders LargeList story 1`] = `
- +
- + + + +
+ +
+ -
- +
+
+ + +
+ -
- +
- + + + +
+ +
+ -
- +
+
+ + +
+ -
- -
- + @@ -4066,7 +4196,7 @@ exports[` > renders LargeList story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
+
+ + +
+ - @@ -4692,7 +4847,7 @@ exports[` > renders LargeList story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -5312,7 +5492,7 @@ exports[` > renders LargeList story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
+
+ + +
+ - @@ -5938,7 +6143,7 @@ exports[` > renders LargeList story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -6558,7 +6788,7 @@ exports[` > renders LargeList story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
+
+ + +
+ - @@ -7184,7 +7439,7 @@ exports[` > renders LargeList story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -7804,7 +8084,7 @@ exports[` > renders LargeList story 1`] = `
+
- -
- - -
- - - -
- - -
- @@ -8188,7 +8356,7 @@ exports[` > renders SmallList story 1`] = `
+
+ + +
+ - @@ -8332,7 +8505,7 @@ exports[` > renders SmallList story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ - @@ -8892,7 +9085,7 @@ exports[` > renders WithActiveFilter story 1`] = `
+
+ + +
+ - @@ -9036,7 +9234,7 @@ exports[` > renders WithActiveFilter story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -9656,7 +9879,7 @@ exports[` > renders WithActiveFilter story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
+
+ + +
+ - @@ -10282,7 +10530,7 @@ exports[` > renders WithActiveFilter story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -10902,7 +11175,7 @@ exports[` > renders WithActiveFilter story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + - diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx index 23f384554d..2d5ff3ed34 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx @@ -18,7 +18,7 @@ const { Default } = composeStories(stories); const renderWithMockContext = (component: React.ReactElement): ReturnType => { return render(component, { wrapper: ({ children }) => ( - + {children} ), diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx index 4ef430520a..634ede2d47 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx @@ -53,8 +53,8 @@ export interface VirtualizedRoomListViewProps { onKeyDown?: (e: React.KeyboardEvent) => void; } -/** Height of a single room list item in pixels */ -const ROOM_LIST_ITEM_HEIGHT = 48; +/** Height of a single room list item in pixels (44px item + 8px margin bottom) */ +const ROOM_LIST_ITEM_HEIGHT = 52; /** * Type for context used in ListView diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap index 85cd5f6d08..2b4378067b 100644 --- a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap +++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap @@ -27,7 +27,7 @@ exports[` > renders Default story 1`] = `
+
+ + +
+ - @@ -171,7 +176,7 @@ exports[` > renders Default story 1`] = `
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- -
- + @@ -791,7 +821,7 @@ exports[` > renders Default story 1`] = `
- +
+
+ + +
+ -
- +
- + + + + + + + -
- +
+
+ + +
+ -
- +
- + + + + + + + - diff --git a/playwright/e2e/sliding-sync/sliding-sync.spec.ts b/playwright/e2e/sliding-sync/sliding-sync.spec.ts index 38aff5928d..cde2d57c14 100644 --- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts +++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts @@ -71,7 +71,9 @@ test.describe("Sliding Sync", () => { }); // Load the user fixture for all tests - test.beforeEach(({ user }) => {}); + test.beforeEach(async ({ app, user }) => { + await app.closeNotificationToast(); + }); test("should render the Rooms list in reverse chronological order by default and allowing sorting A-Z", async ({ page, diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png index 1d5a8ae87a..932af08f7c 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png index 3bafa521b7..122c437092 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png index 64d49f10bc..47e1318cd3 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png index 6968a4f134..9951b21ad4 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png index ac8abd60ad..15e0444cab 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png index 0b879c18fe..932af08f7c 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png index 8256ddbe61..90195d6cce 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png index 583b9f36f9..98d333c5ce 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-space-menu-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png index 008c9076b3..ec3f616ae9 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png index 269c64d00c..55980f5808 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png index 3fa9fd4b0b..916932e156 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png index ac0ee1ad6c..f3b3b7af59 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png index c3b5f34feb..d80be4840f 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png index bc2085b205..4c3f016693 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png index b024c0729c..b1d313bdee 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png index c9dd4b6bd8..7569db5ca2 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png index ee778c6871..92d95f52f7 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png index 4b3c7fc1d1..fe3c039fb7 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png index 7042a7078e..5842bf50f6 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png index 4a92165c46..b8125ad4c5 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png index 3e68b09ad6..9d813b03c5 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png index 68762d038d..d946c3dea4 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png index cdebb2131d..c591eea428 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png index ad64e0c526..653d2ddcb8 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png index d9deb6cb1c..480c7e7511 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png index c3d6f5f952..fe7586f6d5 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png index 896af9eff7..32592acb04 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-linux.png differ diff --git a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png index 81f3af0cb6..4d2e56a921 100644 Binary files a/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png and b/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index dc019d4fd5..98de99bf98 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png index c86f95ee29..0d652c9488 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png index cdb4586302..b2ebc7e027 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png index bc78959225..2eeb9783de 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png index 66963ae433..37080fce40 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png differ diff --git a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png index f3478d05aa..3210a498af 100644 Binary files a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png and b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png differ diff --git a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png index 7555a90440..6e0a26cc6b 100644 Binary files a/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png and b/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png differ diff --git a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png index a911341579..c210321017 100644 Binary files a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png and b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png differ diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png index 34ddc1b02f..39a5ec6a19 100644 Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png differ diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png index 6703827c6d..d255b63c6c 100644 Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png differ