Don't use the minimised width(68px) on the new room list (#29778)

* Don't toggle to the minimised left bar size.

* Don't re-style old room list when at the minimum size

* Only apply larger minimised with on new room list

* Don't tell child views we are minimised for the new room list

* move comment to the correct place

* address PR comments

* Don't wrap search text and add truncation down to a minimum of 50px

* Put min-width on the button so that we don't have to hardcode the 50px

* Keep the flex display, shrink and truncate just the search text and keep the shortcut

* Update snapshots

* Add comment for magic value

* Make inner search text a span

* Add e2e test for smallscreen to test responsiveness

* Update snapshots

* Forcing an empty commit to fix PR

* Change minWidth to 224

playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -38,4 +38,10 @@ test.describe("Room list panel", () => {
         await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
+
+    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
+        await page.setViewportSize({ width: 575, height: 600 });
+        const roomListPanel = page.getByTestId("room-list-panel");
+        await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+    });
 });

res/css/structures/_LeftPanel.pcss

@@ -28,6 +28,12 @@ Please see LICENSE files in the repository root for full details.
     --collapsedWidth: 68px;
 }
 
+.mx_LeftPanel_newRoomList {
+    /* Thew new rooms list is not designed to be collapsed to just icons. */
+    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
+    --collapsedWidth: 224px;
+}
+
 .mx_LeftPanel_wrapper {
     display: flex;
     flex-direction: row;

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

@@ -21,6 +21,7 @@
         flex: 1;
         font: var(--cpd-font-body-md-regular);
         color: var(--cpd-color-text-secondary);
+        min-width: 0;
 
         span {
             flex: 1;
@@ -28,6 +29,17 @@
             kbd {
                 font-family: inherit;
             }
+
+            /* Shrink and truncate the search text */
+            white-space: nowrap;
+            overflow: hidden;
+            .mx_RoomListSearch_search_text {
+                min-width: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                text-align: start;
+            }
         }
     }
 

src/components/structures/LeftPanel.tsx

@@ -379,13 +379,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     }
 
     public render(): React.ReactNode {
+        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
         const containerClasses = classNames({
             mx_LeftPanel: true,
+            mx_LeftPanel_newRoomList: useNewRoomList,
             mx_LeftPanel_minimized: this.props.isMinimized,
         });
 
         const roomListClasses = classNames("mx_LeftPanel_actualRoomListContainer", "mx_AutoHideScrollbar");
-        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
         if (useNewRoomList) {
             return (
                 <div className={containerClasses}>

src/components/structures/LoggedInView.tsx

@@ -259,9 +259,11 @@ class LoggedInView extends React.Component<IProps, IState> {
     private createResizer(): Resizer<ICollapseConfig, CollapseItem> {
         let panelSize: number | null;
         let panelCollapsed: boolean;
-        const collapseConfig: ICollapseConfig = {
+        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
         // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
-            toggleSize: 206 - 50,
+        const toggleSize = useNewRoomList ? 224 : 206 - 50;
+        const collapseConfig: ICollapseConfig = {
+            toggleSize,
             onCollapsed: (collapsed) => {
                 panelCollapsed = collapsed;
                 if (collapsed) {
@@ -697,10 +699,18 @@ class LoggedInView extends React.Component<IProps, IState> {
             "mx_MatrixChat--with-avatar": this.state.backgroundImage,
         });
 
+        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
+
+        const leftPanelWrapperClasses = classNames({
+            mx_LeftPanel_wrapper: true,
+            mx_LeftPanel_newRoomList: useNewRoomList,
+        });
+
         const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
             return <AudioFeedArrayForLegacyCall call={call} key={call.callId} />;
         });
 
+        const shouldUseMinimizedUI = !useNewRoomList && this.props.collapseLhs;
         return (
             <MatrixClientContextProvider client={this._matrixClient}>
                 <div
@@ -712,19 +722,19 @@ class LoggedInView extends React.Component<IProps, IState> {
                     <ToastContainer />
                     <div className={bodyClasses}>
                         <div className="mx_LeftPanel_outerWrapper">
-                            <LeftPanelLiveShareWarning isMinimized={this.props.collapseLhs || false} />
-                            <div className="mx_LeftPanel_wrapper">
+                            <LeftPanelLiveShareWarning isMinimized={shouldUseMinimizedUI || false} />
+                            <div className={leftPanelWrapperClasses}>
                                 <BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
                                 <SpacePanel />
                                 <BackdropPanel backgroundImage={this.state.backgroundImage} />
                                 <div
                                     className="mx_LeftPanel_wrapper--user"
                                     ref={this._resizeContainer}
-                                    data-collapsed={this.props.collapseLhs ? true : undefined}
+                                    data-collapsed={shouldUseMinimizedUI ? true : undefined}
                                 >
                                     <LeftPanel
                                         pageType={this.props.page_type as PageTypes}
-                                        isMinimized={this.props.collapseLhs || false}
+                                        isMinimized={shouldUseMinimizedUI || false}
                                         resizeNotifier={this.props.resizeNotifier}
                                     />
                                 </div>

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

@@ -55,7 +55,7 @@ export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Elemen
                 onClick={() => defaultDispatcher.fire(Action.OpenSpotlight)}
             >
                 <Flex as="span" justify="space-between">
-                    {_t("action|search")}
+                    <span className="mx_RoomListSearch_search_text">{_t("action|search")}</span>
                     <kbd>{IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K"}</kbd>
                 </Flex>
             </Button>

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

@@ -223,8 +223,12 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         <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; --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="mx_RoomListSearch_search_text"
           >
             Search
+          </span>
           <kbd>
             Ctrl K
           </kbd>

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

@@ -29,8 +29,12 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
       <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; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mx_RoomListSearch_search_text"
         >
           Search
+        </span>
         <kbd>
           Ctrl K
         </kbd>
@@ -90,8 +94,12 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
       <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; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mx_RoomListSearch_search_text"
         >
           Search
+        </span>
         <kbd>
           Ctrl K
         </kbd>
@@ -172,8 +180,12 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
       <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; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mx_RoomListSearch_search_text"
         >
           Search
+        </span>
         <kbd>
           Ctrl K
         </kbd>
@@ -212,8 +224,12 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
       <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; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          class="mx_RoomListSearch_search_text"
         >
           Search
+        </span>
         <kbd>
           Ctrl K
         </kbd>