Collapsible Left Panel - Ensure that panels have non-fractional widths

apps/web/src/viewmodels/structures/ResizerViewModel.ts

@@ -57,6 +57,12 @@ export class ResizerViewModel
     }, 50);
 
     public onLeftPanelResized = (newSize: number): void => {
+        // We don't want the panels to have fractional widths as that can cause blurry UI elements.
+        if (!Number.isInteger(newSize)) {
+            this.panelHandle?.resize(`${Math.round(newSize)}%`);
+            return;
+        }
+
         const isCollapsed = newSize === 0;
         // Store the size if the panel isn't collapsed.
         if (!isCollapsed) {
@@ -76,7 +82,7 @@ export class ResizerViewModel
     public onSeparatorClick = (): void => {
         if (this.panelHandle?.isCollapsed()) {
             const lastSize = SettingsStore.getValue("RoomList.panelSize");
-            this.panelHandle.resize(`${lastSize}%`);
+            this.panelHandle.resize(`${lastSize ?? 100}%`);
         }
     };
 

apps/web/test/viewmodels/structures/ResizerViewModel-test.ts

@@ -68,18 +68,33 @@ describe("LeftPanelResizerViewModel", () => {
         expect(() => vm.onSeparatorClick()).not.toThrow();
     });
 
-    it("should expand panel on onSeparatorClick()", () => {
-        const vm = new ResizerViewModel();
-        SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
-        const mockHandle = {
-            resize: jest.fn(),
-            isCollapsed: jest.fn().mockReturnValue(true),
-        } as unknown as PanelImperativeHandle;
-        vm.setPanelHandle(mockHandle);
+    describe("should expand panel on onSeparatorClick()", () => {
+        it("to last non-zero width that the user set", () => {
+            const vm = new ResizerViewModel();
+            SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
+            const mockHandle = {
+                resize: jest.fn(),
+                isCollapsed: jest.fn().mockReturnValue(true),
+            } as unknown as PanelImperativeHandle;
+            vm.setPanelHandle(mockHandle);
+
+            vm.onSeparatorClick();
 
-        vm.onSeparatorClick();
+            expect(mockHandle.resize).toHaveBeenCalledWith("34%");
+        });
+
+        it("to maximum size of the panel", () => {
+            const vm = new ResizerViewModel();
+            const mockHandle = {
+                resize: jest.fn(),
+                isCollapsed: jest.fn().mockReturnValue(true),
+            } as unknown as PanelImperativeHandle;
+            vm.setPanelHandle(mockHandle);
 
-        expect(mockHandle.resize).toHaveBeenCalledWith("34%");
+            vm.onSeparatorClick();
+
+            expect(mockHandle.resize).toHaveBeenCalledWith("100%");
+        });
     });
 
     it("should set isFocusedViaKeyboard state correctly", () => {
@@ -90,4 +105,15 @@ describe("LeftPanelResizerViewModel", () => {
         vm.onBlur();
         expect(vm.getSnapshot().isFocusedViaKeyboard).toStrictEqual(false);
     });
+
+    it("should resize to nearest whole number", () => {
+        const vm = new ResizerViewModel();
+        const mockHandle = {
+            resize: jest.fn(),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        vm.onLeftPanelResized(25.515);
+        expect(mockHandle.resize).toHaveBeenCalledWith("26%");
+    });
 });