Collapsible Left Panel - Ensure that panels have non-fractional widths (#33052)

* Expand panel to full width

* Write tests

* Resize to nearest whole number if necessary

* Update screenshots

* Early return when resizing to whole width

* Update screenshot

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) {

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

@@ -105,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%");
+    });
 });