Room list: update the visuals in order to have better contrast (#32421)

* fix(sc): use correct icon size for room list icons

* feat(sc): implement new selection and hover design for room list item

* feat(sc): set room list item height

* chore(sc): add story for long room and message preview

* fix(sc): use correct letter-spacing for room list item

* feat(sc): use new padding for room list filters

* feat(sc): update room list header style

* test(sc): update unit tests

* test(sc): update visual tests

* test: update playwright screenshots

* doc: update figma link in item story

* test: fix sliding sync test

The notification pop up was at the top of the room list filters (less
top padding) and it was unable to click on the People filter.

* chore: fix `VirtuaalizedRoomListView` comment

* test: update playwright screenshot

* fix(sc): add ellipsis on room name

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css

@@ -6,8 +6,13 @@
  */
 
 .header {
-    flex: 0 0 60px;
+    min-height: 60px;
-    padding: 0 var(--cpd-space-3x);
+    padding: 0 var(--cpd-space-4x) 0 var(--cpd-space-3x);
+}
+
+.container {
+    flex: 1;
+    padding-bottom: var(--cpd-space-3x);
 }
 
 .title {

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx

@@ -130,10 +130,10 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
             as="header"
             className={styles.header}
             aria-label={_t("room|context_menu|title")}
-            justify="space-between"
+            align="end"
-            align="center"
             data-testid="room-list-header"
         >
+            <Flex className={styles.container} justify="space-between" align="center" gap="var(--cpd-space-3x)">
                 <Flex className={styles.title} align="center" gap="var(--cpd-space-1x)">
                     <H1 size="sm" title={title}>
                         {title}
@@ -148,6 +148,8 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                         <ComposeMenuView vm={vm} />
                     ) : (
                         <IconButton
+                            size="28px"
+                            style={{ padding: "4px" }}
                             onClick={(e) => vm.createChatRoom(e.nativeEvent)}
                             tooltip={_t("action|new_conversation")}
                         >
@@ -156,5 +158,6 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                     )}
                 </Flex>
             </Flex>
+        </Flex>
     );
 }

packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap

@@ -6,7 +6,11 @@ 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;"
+  >
+    <div
+      class="flex container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <div
         class="flex title"
@@ -96,7 +100,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           data-state="closed"
           id="radix-_r_9_"
           role="button"
-        style="--cpd-icon-button-size: 36px; padding: 6px;"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
           type="button"
         >
@@ -124,6 +128,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           </div>
         </button>
       </div>
+    </div>
   </header>
 </div>
 `;
@@ -134,7 +139,11 @@ 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;"
+  >
+    <div
+      class="flex container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <div
         class="flex title"
@@ -219,7 +228,7 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
           class="_icon-button_1215g_8"
           data-kind="primary"
           role="button"
-        style="--cpd-icon-button-size: 32px;"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
         >
           <div
@@ -247,6 +256,7 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
           </div>
         </button>
       </div>
+    </div>
   </header>
 </div>
 `;
@@ -257,7 +267,11 @@ 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;"
+  >
+    <div
+      class="flex container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <div
         class="flex title"
@@ -316,7 +330,7 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
           data-state="closed"
           id="radix-_r_19_"
           role="button"
-        style="--cpd-icon-button-size: 36px; padding: 6px;"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
           type="button"
         >
@@ -344,6 +358,7 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
           </div>
         </button>
       </div>
+    </div>
   </header>
 </div>
 `;

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
-                <IconButton size="36px" style={{ padding: "6px" }} tooltip={_t("action|new_conversation")}>
+                <IconButton size="28px" style={{ padding: "4px" }} tooltip={_t("action|new_conversation")}>
                     <ComposeIcon aria-hidden />
                 </IconButton>
             }

packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<ComposeMenuView /> > 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"
   >

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" }}
                 >
                     <OverflowHorizontalIcon />
                 </IconButton>

packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx

@@ -51,6 +51,7 @@ export function RoomListItemNotificationMenu({ vm }: RoomListItemNotificationMen
             trigger={
                 <IconButton
                     size="24px"
+                    style={{ padding: "2px" }}
                     tooltip={_t("room_list|notification_options")}
                     aria-label={_t("room_list|notification_options")}
                 >

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;
     }
+}
 
-    /**
+.container {
-     * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
+    flex: 1;
-     * the icon size of the menu is 18px instead of 20px with a different internal padding
+    height: 100%;
-     * We need to use 18px to align the icon with the others icons
+    margin: 0 var(--cpd-space-3x);
-     * 18px is not available in compound spacing
+    padding: 0 var(--cpd-space-2x);
-     */
+    border-radius: 8px;
-    .content {
+    min-width: 0;
-        padding-right: 18px;
-    }
 }
 
 .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 */

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<typeof RoomListItemWrapper>;
@@ -112,6 +112,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const LongContent: Story = {
+    args: {
+        name: "Loooooooooooooooooooooooooooooooooooooong name",
+        messagePreview: "Loooooooooooooooooooooooooooooooooooooong preview",
+    },
+};
+
 export const Selected: Story = {
     args: {
         isSelected: true,

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,17 +175,18 @@ export const RoomListItemView = memo(function RoomListItemView({
             tabIndex={isFocused ? 0 : -1}
             {...props}
         >
+            <Flex className={styles.container} gap="var(--cpd-space-3x)" align="center">
                 {renderAvatar(item.room)}
                 <Flex className={styles.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={styles.text}>
+                    <div className={styles.ellipsis}>
                         <div className={styles.roomName} title={item.name} data-testid="room-name">
                             {item.name}
                         </div>
                         {item.messagePreview && (
-                        <div className={styles.messagePreview} title={item.messagePreview}>
+                            <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
                                 {item.messagePreview}
-                        </div>
+                            </Text>
                         )}
                     </div>
                     {(item.showMoreOptionsMenu || item.showNotificationMenu) && (
@@ -201,6 +203,7 @@ export const RoomListItemView = memo(function RoomListItemView({
                     </div>
                 </Flex>
             </Flex>
+        </Flex>
     );
 
     return <RoomListItemContextMenu vm={vm}>{content}</RoomListItemContextMenu>;

packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap

@@ -21,6 +21,10 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -34,7 +38,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -44,7 +48,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
                 Team Updates
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Alice: Hey everyone!"
               >
                 Alice: Hey everyone!
@@ -65,7 +69,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
                 data-state="closed"
                 id="radix-_r_10_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -97,7 +101,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
                 data-state="closed"
                 id="radix-_r_17_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -124,6 +128,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
               class="notificationDecoration"
             />
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -151,6 +156,10 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -164,7 +173,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -174,7 +183,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
                 General
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Alice: Hey everyone!"
               >
                 Alice: Hey everyone!
@@ -195,7 +204,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
                 data-state="closed"
                 id="radix-_r_0_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -227,7 +236,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
                 data-state="closed"
                 id="radix-_r_7_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -254,6 +263,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
               class="notificationDecoration"
             />
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -281,6 +291,10 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -294,7 +308,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -304,7 +318,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
                 Secret Project
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Bob invited you"
               >
                 Bob invited you
@@ -325,7 +339,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
                 data-state="closed"
                 id="radix-_r_2g_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -357,7 +371,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
                 data-state="closed"
                 id="radix-_r_2n_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -402,6 +416,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
               </div>
             </div>
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -429,6 +444,10 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -442,7 +461,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -467,7 +486,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
                 data-state="closed"
                 id="radix-_r_3g_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -499,7 +518,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
                 data-state="closed"
                 id="radix-_r_3n_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -526,6 +545,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
               class="notificationDecoration"
             />
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -553,6 +573,10 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -566,7 +590,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -576,7 +600,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
                 General
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Alice: Hey everyone!"
               >
                 Alice: Hey everyone!
@@ -597,7 +621,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
                 data-state="closed"
                 id="radix-_r_g_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -629,7 +653,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
                 data-state="closed"
                 id="radix-_r_n_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -656,6 +680,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
               class="notificationDecoration"
             />
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -683,6 +708,10 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -696,7 +725,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -706,7 +735,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
                 General
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Failed to send message"
               >
                 Failed to send message
@@ -727,7 +756,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
                 data-state="closed"
                 id="radix-_r_30_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -759,7 +788,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
                 data-state="closed"
                 id="radix-_r_37_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -804,6 +833,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
               </div>
             </div>
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -831,6 +861,10 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -844,7 +878,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -854,7 +888,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
                 General
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Alice: Hey everyone!"
               >
                 Alice: Hey everyone!
@@ -875,7 +909,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
                 data-state="closed"
                 id="radix-_r_40_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -907,7 +941,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
                 data-state="closed"
                 id="radix-_r_47_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -934,6 +968,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
               class="notificationDecoration"
             />
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -961,6 +996,10 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -974,7 +1013,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -984,7 +1023,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
                 General
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Alice: Hey everyone!"
               >
                 Alice: Hey everyone!
@@ -1005,7 +1044,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
                 data-state="closed"
                 id="radix-_r_20_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -1037,7 +1076,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
                 data-state="closed"
                 id="radix-_r_27_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -1087,6 +1126,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
               </div>
             </div>
           </div>
+        </div>
       </button>
     </div>
   </div>
@@ -1114,6 +1154,10 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         tabindex="-1"
         type="button"
+      >
+        <div
+          class="flex container"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <div
             aria-label="General avatar"
@@ -1127,7 +1171,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-            class="text"
+              class="ellipsis"
             >
               <div
                 class="roomName"
@@ -1137,7 +1181,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
                 General
               </div>
               <div
-              class="messagePreview"
+                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                 title="Alice: Hey everyone!"
               >
                 Alice: Hey everyone!
@@ -1158,7 +1202,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
                 data-state="closed"
                 id="radix-_r_1g_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -1190,7 +1234,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
                 data-state="closed"
                 id="radix-_r_1n_"
                 role="button"
-              style="--cpd-icon-button-size: 24px;"
+                style="--cpd-icon-button-size: 24px; padding: 2px;"
                 tabindex="0"
                 type="button"
               >
@@ -1229,6 +1273,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
               </div>
             </div>
           </div>
+        </div>
       </button>
     </div>
   </div>

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 */

packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx

@@ -34,7 +34,7 @@ const {
 const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
     return render(component, {
         wrapper: ({ children }) => (
-            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}>
+            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 52 }}>
                 {children}
             </VirtuosoMockContext.Provider>
         ),

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx

@@ -18,7 +18,7 @@ const { Default } = composeStories(stories);
 const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
     return render(component, {
         wrapper: ({ children }) => (
-            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}>
+            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 52 }}>
                 {children}
             </VirtuosoMockContext.Provider>
         ),

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx

@@ -53,8 +53,8 @@ export interface VirtualizedRoomListViewProps {
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
-/** Height of a single room list item in pixels */
+/** Height of a single room list item in pixels (44px item + 8px margin bottom) */
-const ROOM_LIST_ITEM_HEIGHT = 48;
+const ROOM_LIST_ITEM_HEIGHT = 52;
 
 /**
  * Type for context used in ListView

packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
             <div
               data-index="0"
               data-item-index="0"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -42,6 +42,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="General avatar"
@@ -55,7 +59,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -65,7 +69,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         General
                       </div>
                       <div
-                      class="messagePreview"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                         title="Last message in General"
                       >
                         Last message in General
@@ -86,7 +90,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_0_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -118,7 +122,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_7_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -166,12 +170,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="1"
               data-item-index="1"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -186,6 +191,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Random avatar"
@@ -199,7 +208,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -224,7 +233,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_e_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -256,7 +265,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_l_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -283,12 +292,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="2"
               data-item-index="2"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -303,6 +313,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Engineering avatar"
@@ -316,7 +330,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -326,7 +340,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         Engineering
                       </div>
                       <div
-                      class="messagePreview"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                         title="Last message in Engineering"
                       >
                         Last message in Engineering
@@ -347,7 +361,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_s_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -379,7 +393,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_13_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -406,12 +420,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="3"
               data-item-index="3"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -426,6 +441,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Design avatar"
@@ -439,7 +458,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -464,7 +483,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_1a_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -496,7 +515,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_1h_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -523,12 +542,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="4"
               data-item-index="4"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -543,6 +563,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Product avatar"
@@ -556,7 +580,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -566,7 +590,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         Product
                       </div>
                       <div
-                      class="messagePreview"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                         title="Last message in Product"
                       >
                         Last message in Product
@@ -587,7 +611,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_1o_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -619,7 +643,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_1v_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -646,12 +670,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="5"
               data-item-index="5"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -666,6 +691,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Marketing avatar"
@@ -679,7 +708,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -704,7 +733,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_26_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -736,7 +765,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_2d_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -786,12 +815,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="6"
               data-item-index="6"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -806,6 +836,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Sales avatar"
@@ -819,7 +853,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -829,7 +863,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         Sales
                       </div>
                       <div
-                      class="messagePreview"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                         title="Last message in Sales"
                       >
                         Last message in Sales
@@ -850,7 +884,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_2k_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -882,7 +916,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_2r_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -909,12 +943,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="7"
               data-item-index="7"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -929,6 +964,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Support avatar"
@@ -942,7 +981,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -967,7 +1006,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_32_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -999,7 +1038,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_39_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -1026,12 +1065,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="8"
               data-item-index="8"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -1046,6 +1086,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Announcements avatar"
@@ -1059,7 +1103,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -1069,7 +1113,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         Announcements
                       </div>
                       <div
-                      class="messagePreview"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
                         title="Last message in Announcements"
                       >
                         Last message in Announcements
@@ -1090,7 +1134,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_3g_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -1122,7 +1166,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_3n_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -1149,12 +1193,13 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
             <div
               data-index="9"
               data-item-index="9"
-              data-known-size="48"
+              data-known-size="52"
               style="overflow-anchor: none;"
             >
               <button
@@ -1169,6 +1214,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 tabindex="-1"
                 type="button"
+              >
+                <div
+                  class="flex container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
                     aria-label="Off-topic avatar"
@@ -1182,7 +1231,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                    class="text"
+                      class="ellipsis"
                     >
                       <div
                         class="roomName"
@@ -1207,7 +1256,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_3u_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -1239,7 +1288,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         data-state="closed"
                         id="radix-_r_45_"
                         role="button"
-                      style="--cpd-icon-button-size: 24px;"
+                        style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
                         type="button"
                       >
@@ -1266,6 +1315,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       class="notificationDecoration"
                     />
                   </div>
+                </div>
               </button>
             </div>
           </div>

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,