Float the badges with the sticky headers

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,13 +129,6 @@ limitations under the License.
         .mx_RoomSublist2_headerText {
             flex: 1;
             max-width: calc(100% - 16px); // 16px is the badge width
-
-            // 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;
@@ -138,7 +140,6 @@ limitations under the License.
             white-space: nowrap;
         }
     }
-    }
 
     .mx_RoomSublist2_resizeBox {
         margin-bottom: 4px; // for the resize handle

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`);

src/components/views/rooms/RoomSublist2.tsx

@@ -257,6 +257,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     // TODO: a11y (see old component)
                     return (
                         <div className={classes}>
+                            <div className='mx_RoomSublist2_stickable'>
                                 <AccessibleButton
                                     inputRef={ref}
                                     tabIndex={tabIndex}
@@ -272,6 +273,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                     {badge}
                                 </div>
                             </div>
+                        </div>
                     );
                 }}
             </RovingTabIndexWrapper>