Add wrap props to flex component (#29480)

* feat(flex): add wrap props to flex component

* test: update snapshot

res/css/components/views/utils/_Flex.pcss

@@ -12,4 +12,5 @@ Please see LICENSE files in the repository root for full details.
     align-items: var(--mx-flex-align, unset);
     justify-content: var(--mx-flex-justify, unset);
     gap: var(--mx-flex-gap, unset);
+    flex-wrap: var(--mx-flex-wrap, unset);
 }

src/components/utils/Flex.tsx

@@ -39,6 +39,11 @@ type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any
      * @default start
      */
     justify?: "start" | "center" | "end" | "space-between";
+    /**
+     * The wrapping of the flex children
+     * @default nowrap
+     */
+    wrap?: "wrap" | "nowrap" | "wrap-reverse";
     /**
      * The spacing between the flex children, expressed with the CSS unit
      * @default 0
@@ -60,6 +65,7 @@ export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstruct
     align = "start",
     justify = "start",
     gap = "0",
+    wrap = "nowrap",
     className,
     children,
     ...props
@@ -71,8 +77,9 @@ export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstruct
             "--mx-flex-align": align,
             "--mx-flex-justify": justify,
             "--mx-flex-gap": gap,
+            "--mx-flex-wrap": wrap,
         }),
-        [align, direction, display, gap, justify],
+        [align, direction, display, gap, justify, wrap],
     );
 
     return React.createElement(as, { ...props, className: classNames("mx_Flex", className), style }, children);

test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap

@@ -99,7 +99,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       </p>
       <div
         class="mx_Flex mx_ErrorView_buttons"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
           class="_button_vczzf_8 _has-icon_vczzf_57"
@@ -140,7 +140,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
     </h2>
     <div
       class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
         class="_button_vczzf_8 _has-icon_vczzf_57"
@@ -210,7 +210,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
     </h2>
     <div
       class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
     >
       <a
         href="https://apps.apple.com/app/vector/id1083446067"

test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap

@@ -52,7 +52,7 @@ exports[`FilePanel renders empty state 1`] = `
       >
         <div
           class="mx_Flex mx_EmptyState"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
         >
           <svg
             fill="currentColor"

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
   >
     <header
       class="mx_Flex mx_RoomHeader light-panel"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      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;"
     >
       <button
         aria-label="Open room settings"
@@ -222,7 +222,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
   >
     <header
       class="mx_Flex mx_RoomHeader light-panel"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      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;"
     >
       <button
         aria-label="Open room settings"
@@ -522,7 +522,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
   >
     <header
       class="mx_Flex mx_RoomHeader light-panel"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      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;"
     >
       <button
         aria-label="Open room settings"
@@ -899,7 +899,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
   >
     <header
       class="mx_Flex mx_RoomHeader light-panel"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      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;"
     >
       <button
         aria-label="Open room settings"
@@ -1284,7 +1284,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
       >
         <header
           class="mx_Flex mx_RoomHeader light-panel"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+          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;"
         >
           <button
             aria-label="Open room settings"
@@ -1492,7 +1492,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
       >
         <header
           class="mx_Flex mx_RoomHeader light-panel"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+          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;"
         >
           <button
             aria-label="Open room settings"
@@ -1873,7 +1873,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
       >
         <header
           class="mx_Flex mx_RoomHeader light-panel"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+          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;"
         >
           <button
             aria-label="Open room settings"

test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap

@@ -43,7 +43,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
     </p>
     <div
       class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <button
         class="_button_vczzf_8 mx_Dialog_nonDialogButton _has-icon_vczzf_57"

test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap

@@ -71,7 +71,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
       </button>
       <div
         class="mx_Flex mx_EmptyState"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <svg
           fill="currentColor"

test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

@@ -50,7 +50,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
     >
       <div
         class="mx_Flex mx_EmptyState"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <svg
           fill="currentColor"

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -69,7 +69,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         />
         <section
           class="mx_Flex mx_RoomSummaryCard_badges"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
@@ -91,7 +91,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </section>
         <section
           class="mx_Flex mx_RoomSummaryCard_topic"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
             class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"
@@ -724,7 +724,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         />
         <section
           class="mx_Flex mx_RoomSummaryCard_badges"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
@@ -746,7 +746,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </section>
         <section
           class="mx_Flex mx_RoomSummaryCard_topic"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
             class="mx_Box mx_Box--flex"
@@ -1342,7 +1342,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         />
         <section
           class="mx_Flex mx_RoomSummaryCard_badges"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
             class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
@@ -1364,7 +1364,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </section>
         <section
           class="mx_Flex mx_RoomSummaryCard_topic"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
             class="mx_Box mx_RoomSummaryCard_topic_container mx_Box--flex"

test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -77,7 +77,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
       >
         <div
           class="mx_Flex mx_UserInfo_profile"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <h1
             class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
@@ -85,7 +85,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           >
             <div
               class="mx_Flex mx_UserInfo_profile_name"
-              style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
             >
               @user:example.com
             </div>
@@ -113,7 +113,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         </div>
         <div
           class="mx_Flex mx_UserInfo_verification"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <p
             class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 mx_UserInfo_verification_unavailable"
@@ -363,7 +363,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
       >
         <div
           class="mx_Flex mx_UserInfo_profile"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <h1
             class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
@@ -371,7 +371,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           >
             <div
               class="mx_Flex mx_UserInfo_profile_name"
-              style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+              style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
             >
               @user:example.com
             </div>
@@ -399,7 +399,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         </div>
         <div
           class="mx_Flex mx_UserInfo_verification"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <svg
             class="_icon_11k6c_18"
@@ -653,7 +653,7 @@ exports[`<UserInfoHeader /> renders verification unavailable message 1`] = `
   >
     <div
       class="mx_Flex mx_UserInfo_profile"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h1
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
@@ -661,7 +661,7 @@ exports[`<UserInfoHeader /> renders verification unavailable message 1`] = `
       >
         <div
           class="mx_Flex mx_UserInfo_profile_name"
-          style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           @user:example.com
         </div>
@@ -689,7 +689,7 @@ exports[`<UserInfoHeader /> renders verification unavailable message 1`] = `
     </div>
     <div
       class="mx_Flex mx_UserInfo_verification"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <p
         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 mx_UserInfo_verification_unavailable"
@@ -735,7 +735,7 @@ exports[`<UserInfoHeader /> renders verified badge when user is verified 1`] = `
   >
     <div
       class="mx_Flex mx_UserInfo_profile"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h1
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
@@ -743,7 +743,7 @@ exports[`<UserInfoHeader /> renders verified badge when user is verified 1`] = `
       >
         <div
           class="mx_Flex mx_UserInfo_profile_name"
-          style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           @user:example.com
         </div>
@@ -771,7 +771,7 @@ exports[`<UserInfoHeader /> renders verified badge when user is verified 1`] = `
     </div>
     <div
       class="mx_Flex mx_UserInfo_verification"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
         class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8 mx_UserInfo_verified_badge"
@@ -832,7 +832,7 @@ exports[`<UserInfoHeader /> renders verify button 1`] = `
   >
     <div
       class="mx_Flex mx_UserInfo_profile"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h1
         class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
@@ -840,7 +840,7 @@ exports[`<UserInfoHeader /> renders verify button 1`] = `
       >
         <div
           class="mx_Flex mx_UserInfo_profile_name"
-          style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           @user:example.com
         </div>
@@ -868,7 +868,7 @@ exports[`<UserInfoHeader /> renders verify button 1`] = `
     </div>
     <div
       class="mx_Flex mx_UserInfo_verification"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0;"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <div
         class="mx_UserInfo_container_verifyButton"

test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap

@@ -4,7 +4,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
 <DocumentFragment>
   <header
     class="mx_Flex mx_RoomHeader light-panel"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+    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;"
   >
     <button
       aria-label="Open room settings"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap

@@ -31,7 +31,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -58,7 +58,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room0"
@@ -77,7 +77,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -104,7 +104,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room1"
@@ -123,7 +123,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -150,7 +150,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room2"
@@ -169,7 +169,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -196,7 +196,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room3"
@@ -215,7 +215,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -242,7 +242,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room4"
@@ -261,7 +261,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -288,7 +288,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room5"
@@ -307,7 +307,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -334,7 +334,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room6"
@@ -353,7 +353,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -380,7 +380,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room7"
@@ -399,7 +399,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -426,7 +426,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room8"
@@ -445,7 +445,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <div
               class="mx_Flex mx_RoomListCell_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);"
+              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
                 class="mx_DecoratedRoomAvatar"
@@ -472,7 +472,7 @@ exports[`<RoomList /> should render a room list 1`] = `
               </div>
               <div
                 class="mx_Flex mx_RoomListCell_content"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
               >
                 <span
                   title="room9"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListCell-test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<RoomListCell /> should render a room cell 1`] = `
   >
     <div
       class="mx_Flex mx_RoomListCell_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);"
+      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
         class="mx_DecoratedRoomAvatar"
@@ -36,7 +36,7 @@ exports[`<RoomListCell /> should render a room cell 1`] = `
       </div>
       <div
         class="mx_Flex mx_RoomListCell_content"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
           title="room1"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap

@@ -6,11 +6,11 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
     aria-label="Room options"
     class="mx_Flex mx_RoomListHeaderView"
     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;"
+    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;"
   >
     <div
       class="mx_Flex mx_RoomListHeaderView_title"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
         title="title"
@@ -93,11 +93,11 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
     aria-label="Room options"
     class="mx_Flex mx_RoomListHeaderView"
     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;"
+    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;"
   >
     <div
       class="mx_Flex mx_RoomListHeaderView_title"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
         title="title"
@@ -145,11 +145,11 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
     aria-label="Room options"
     class="mx_Flex mx_RoomListHeaderView"
     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;"
+    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;"
   >
     <div
       class="mx_Flex mx_RoomListHeaderView_title"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
         title="title"
@@ -232,11 +232,11 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
     aria-label="Room options"
     class="mx_Flex mx_RoomListHeaderView"
     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;"
+    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;"
   >
     <div
       class="mx_Flex mx_RoomListHeaderView_title"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
         title="title"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

@@ -5,17 +5,17 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
   <section
     class="mx_Flex mx_RoomListPanel"
     data-testid="room-list-panel"
-    style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0;"
+    style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <header
       aria-label="Room options"
       class="mx_Flex mx_RoomListHeaderView"
       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;"
+      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;"
     >
       <div
         class="mx_Flex mx_RoomListHeaderView_title"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
       >
         <h1
           title="Home"
@@ -64,12 +64,12 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
   <section
     class="mx_Flex mx_RoomListPanel"
     data-testid="room-list-panel"
-    style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0;"
+    style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
       class="mx_Flex mx_RoomListSearch"
       role="search"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <button
         class="_button_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
@@ -92,7 +92,7 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         </svg>
         <span
           class="mx_Flex"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           Search
           <kbd>
@@ -126,11 +126,11 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
       aria-label="Room options"
       class="mx_Flex mx_RoomListHeaderView"
       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;"
+      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;"
     >
       <div
         class="mx_Flex mx_RoomListHeaderView_title"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
       >
         <h1
           title="Home"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap

@@ -5,7 +5,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
   <div
     class="mx_Flex mx_RoomListSearch"
     role="search"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
       class="_button_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
@@ -28,7 +28,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
       </svg>
       <span
         class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         Search
         <kbd>
@@ -66,7 +66,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
   <div
     class="mx_Flex mx_RoomListSearch"
     role="search"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
       class="_button_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
@@ -89,7 +89,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
       </svg>
       <span
         class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         Search
         <kbd>
@@ -148,7 +148,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
   <div
     class="mx_Flex mx_RoomListSearch"
     role="search"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
       class="_button_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
@@ -171,7 +171,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
       </svg>
       <span
         class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         Search
         <kbd>
@@ -188,7 +188,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
   <div
     class="mx_Flex mx_RoomListSearch"
     role="search"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
       class="_button_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
@@ -211,7 +211,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
       </svg>
       <span
         class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         Search
         <kbd>

test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap

@@ -50,11 +50,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
     >
       <div
         class="mx_Flex mx_ThirdPartyMemberInfo"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <section
           class="mx_Flex"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
             class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
@@ -124,11 +124,11 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
     >
       <div
         class="mx_Flex mx_ThirdPartyMemberInfo"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <section
           class="mx_Flex"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
             class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"

test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

@@ -232,7 +232,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
         </div>
         <div
           class="mx_Flex mx_InvitedIconView"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
         >
           <svg
             fill="currentColor"

test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap

@@ -84,7 +84,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     </div>
     <div
       class="mx_Flex mx_EncryptionCard_emphasisedContent"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
         class="_visual-list_15wzx_8"
@@ -266,7 +266,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     </div>
     <div
       class="mx_Flex mx_EncryptionCard_emphasisedContent"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
         class="_visual-list_15wzx_8"
@@ -451,7 +451,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     </div>
     <div
       class="mx_Flex mx_EncryptionCard_emphasisedContent"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
         class="_visual-list_15wzx_8"
@@ -555,7 +555,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       </button>
       <div
         class="mx_Flex mx_EncryptionCard_emphasisedContent"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <span
           class="mx_ResetIdentityPanel_warning"

test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap

@@ -255,7 +255,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         </div>
         <div
           class="mx_Flex mx_EncryptionCard_emphasisedContent"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <ul
             class="_visual-list_15wzx_8"

test/unit-tests/vector/__snapshots__/init-test.ts.snap

@@ -103,7 +103,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       </p>
       <div
         class="mx_Flex mx_ErrorView_buttons"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
           class="_button_vczzf_8 _has-icon_vczzf_57"
@@ -153,7 +153,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
     </h2>
     <div
       class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
         class="_button_vczzf_8 _has-icon_vczzf_57"
@@ -223,7 +223,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
     </h2>
     <div
       class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x);"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
     >
       <a
         href="https://apps.apple.com/app/vector/id1083446067"