Fix room list unable to be resized when displayed after a module (#31186)

* fix: recreate resizer when the page type changes

* test: add tests

src/components/structures/LoggedInView.tsx

@@ -191,14 +191,30 @@ class LoggedInView extends React.Component<IProps, IState> {
             SettingsStore.watchSetting("userTimezone", null, this.onTimezoneUpdate),
         ];
 
-        this.resizer = this.createResizer();
+        this.loadResizer();
-        this.resizer.attach();
 
         OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage);
-        this.loadResizerPreferences();
         this.refreshBackgroundImage();
     }
 
+    /**
+     * Load or reload the resizer for the left panel
+     */
+    private loadResizer(): void {
+        // If the resizer already exists, detach it first
+        this.resizer?.detach();
+
+        this.resizer = this.createResizer();
+        this.resizer.attach();
+        this.loadResizerPreferences();
+    }
+
+    public componentDidUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): void {
+        if (nextProps.page_type !== this.props.page_type) {
+            this.loadResizer();
+        }
+    }
+
     private onTimezoneUpdate = async (): Promise<void> => {
         // TODO: In a future app release, remove support for legacy key.
         if (!SettingsStore.getValue("userTimezonePublish")) {

test/unit-tests/components/structures/LoggedInView-test.tsx

@@ -584,4 +584,34 @@ describe("<LoggedInView />", () => {
             expect(window.localStorage.getItem("mx_lhs_size")).toBe("224");
         });
     });
+
+    describe("create a new resizer when page_type changes", () => {
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        it("should call loadResizer when page_type changes", () => {
+            const component = getComponent({ page_type: "room" });
+
+            // Re-render with different page_type
+            component.rerender(<LoggedInView {...defaultProps} page_type="home" />);
+
+            // Verify that detach was called (from loadResizer)
+            expect(mockResizerInstance.detach).toHaveBeenCalledTimes(1);
+            // Verify that attach was called (from loadResizer)
+            // 1 (when page_type = "room") + 1 (when page_type = "home")
+            expect(mockResizerInstance.attach).toHaveBeenCalledTimes(2);
+        });
+
+        it("should not call loadResizer when page_type remains the same", () => {
+            const component = getComponent({ page_type: "room" });
+
+            // Re-render with same page_type but different other props
+            component.rerender(<LoggedInView {...defaultProps} page_type="room" currentRoomId="!different:room.id" />);
+
+            // Verify that resizer methods were not called
+            expect(mockResizerInstance.detach).not.toHaveBeenCalled();
+            expect(mockResizerInstance.attach).toHaveBeenCalledTimes(1);
+        });
+    });
 });