chore: make the room list panel a flexbox

res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss

@@ -6,7 +6,7 @@
  */
 
 .mx_RoomListHeaderView {
-    height: 60px;
+    flex: 0 0 60px;
     padding: 0 var(--cpd-space-3x);
 
     .mx_RoomListHeaderView_title {

res/css/views/rooms/RoomListPanel/_RoomListSearch.pcss

@@ -7,7 +7,7 @@
 
 .mx_RoomListSearch {
     /* From figma, this should be aligned with the room header */
-    height: 64px;
+    flex: 0 0 64px;
     box-sizing: border-box;
     border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
     padding: 0 var(--cpd-space-3x);

src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -13,6 +13,7 @@ import { shouldShowComponent } from "../../../../customisations/helpers/UICompon
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
+import { Flex } from "../../../utils/Flex";
 import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
 
 type RoomListPanelProps = {
@@ -39,7 +40,13 @@ export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) =>
     };
 
     return (
-        <section className="mx_RoomListPanel" data-testid="room-list-panel">
+        <Flex
+            as="section"
+            className="mx_RoomListPanel"
+            data-testid="room-list-panel"
+            direction="column"
+            align="stretch"
+        >
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />
             <AutoSizer>
@@ -53,6 +60,6 @@ export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) =>
                     />
                 )}
             </AutoSizer>
-        </section>
+        </Flex>
     );
 };