fix: stabilize Sudoku workspace layout

tests/components/boardViewport.test.tsx

@@ -9,19 +9,35 @@ describe("BoardViewport", () => {
 
   it("zooms, fits and restores the persisted scale", async () => {
     const user = userEvent.setup();
-    const { unmount } = render(
+    const { container, unmount } = render(
       <BoardViewport>
         <div>Board</div>
       </BoardViewport>,
     );
 
     expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
+    expect(container.querySelector(".board-viewport")).not.toHaveClass(
+      "is-zoomed-in",
+    );
+    await user.click(screen.getByRole("button", { name: "Zoom board out" }));
+    expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("75%");
+    expect(container.querySelector(".board-viewport__canvas")).toHaveStyle({
+      width: "75%",
+      maxWidth: "36rem",
+    });
+    expect(container.querySelector(".board-viewport")).not.toHaveClass(
+      "is-zoomed-in",
+    );
+    await user.click(screen.getByRole("button", { name: "Zoom board in" }));
     await user.click(screen.getByRole("button", { name: "Zoom board in" }));
     expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
+    expect(container.querySelector(".board-viewport")).toHaveClass(
+      "is-zoomed-in",
+    );
     expect(localStorage.getItem(BOARD_SCALE_STORAGE_KEY)).toBe("1.25");
     unmount();
 
-    render(
+    const restored = render(
       <BoardViewport>
         <div>Board</div>
       </BoardViewport>,
@@ -29,6 +45,9 @@ describe("BoardViewport", () => {
     expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("125%");
     await user.click(screen.getByRole("button", { name: "Fit board" }));
     expect(screen.getByLabelText("Board zoom level")).toHaveTextContent("100%");
+    expect(restored.container.querySelector(".board-viewport")).not.toHaveClass(
+      "is-zoomed-in",
+    );
   });
 
   it("offers explicit pan mode and board-scoped zoom shortcuts", async () => {