diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 48e6ec7022..746f373e64 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -27,7 +27,7 @@ limitations under the License.
     width: 100%;
 
     .mx_RoomSublist2_headerContainer {
-        // Create a flexbox to make ordering easy
+        // Create a flexbox to make alignment easy
         display: flex;
         align-items: center;
 
@@ -47,9 +47,18 @@ limitations under the License.
         padding-bottom: 8px;
         height: 24px;
 
-        .mx_RoomSublist2_headerText {
+        .mx_RoomSublist2_stickable {
+            flex: 1;
+            max-width: 100%;
             z-index: 2; // Prioritize headers in the visible list over sticky ones
 
+            // Set the same background color as the room list for sticky headers
+            background-color: $roomlist2-bg-color;
+
+            // Create a flexbox to make ordering easy
+            display: flex;
+            align-items: center;
+
             // We use a generic sticky class for 2 reasons: to reduce style duplication and
             // to identify when a header is sticky. If we didn't have a consistent sticky class,
             // we'd have to do the "is sticky" checks again on click, as clicking the header
@@ -120,23 +129,15 @@ limitations under the License.
         .mx_RoomSublist2_headerText {
             flex: 1;
             max-width: calc(100% - 16px); // 16px is the badge width
+            text-transform: uppercase;
+            opacity: 0.5;
+            line-height: $font-16px;
+            font-size: $font-12px;
 
-            // Set the same background color as the room list for sticky headers
-            background-color: $roomlist2-bg-color;
-
-            // Target the span inside the container so we don't opacify the
-            // whole header, which can make the sticky header experience annoying.
-            > span {
-                text-transform: uppercase;
-                opacity: 0.5;
-                line-height: $font-16px;
-                font-size: $font-12px;
-
-                // Ellipsize any text overflow
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-            }
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
         }
     }
 
diff --git a/src/components/structures/LeftPanel2.tsx b/src/components/structures/LeftPanel2.tsx
index f6482b06ae..650828e9b0 100644
--- a/src/components/structures/LeftPanel2.tsx
+++ b/src/components/structures/LeftPanel2.tsx
@@ -102,7 +102,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
         for (const sublist of sublists) {
             const slRect = sublist.getBoundingClientRect();
 
-            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_headerText");
+            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist2_stickable");
 
             if (slRect.top + headerHeight > bottom && !gotBottom) {
                 console.log(`${header.textContent} is off the bottom`);
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 9f8b8579c3..5c23004a4f 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -257,19 +257,21 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     // TODO: a11y (see old component)
                     return (
                         <div className={classes}>
-                            <AccessibleButton
-                                inputRef={ref}
-                                tabIndex={tabIndex}
-                                className={"mx_RoomSublist2_headerText"}
-                                role="treeitem"
-                                aria-level={1}
-                            >
-                                <span>{this.props.label}</span>
-                            </AccessibleButton>
-                            {this.renderMenu()}
-                            {addRoomButton}
-                            <div className="mx_RoomSublist2_badgeContainer">
-                                {badge}
+                            <div className='mx_RoomSublist2_stickable'>
+                                <AccessibleButton
+                                    inputRef={ref}
+                                    tabIndex={tabIndex}
+                                    className={"mx_RoomSublist2_headerText"}
+                                    role="treeitem"
+                                    aria-level={1}
+                                >
+                                    <span>{this.props.label}</span>
+                                </AccessibleButton>
+                                {this.renderMenu()}
+                                {addRoomButton}
+                                <div className="mx_RoomSublist2_badgeContainer">
+                                    {badge}
+                                </div>
                             </div>
                         </div>
                     );