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

tests/components/numberPad.test.tsx

@@ -3,7 +3,42 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import { NumberPad } from "../../src/components/NumberPad";
 
-describe("NumberPad colour accessibility", () => {
+describe("NumberPad", () => {
+  it("marks standard and large digit layouts and exposes a full-row erase key", () => {
+    const { container, rerender } = render(
+      <NumberPad
+        size={9}
+        mode="value"
+        onMode={vi.fn()}
+        onValue={vi.fn()}
+        onErase={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("group", { name: "Digits" })).toHaveClass(
+      "digit-pad",
+    );
+    expect(container.querySelector(".digit-pad")).not.toHaveClass(
+      "digit-pad--wide",
+    );
+    expect(screen.getByRole("button", { name: "Erase" })).toHaveClass(
+      "erase-key",
+    );
+
+    rerender(
+      <NumberPad
+        size={16}
+        mode="value"
+        onMode={vi.fn()}
+        onValue={vi.fn()}
+        onErase={vi.fn()}
+      />,
+    );
+    expect(container.querySelector(".digit-pad")).toHaveClass(
+      "digit-pad--wide",
+    );
+  });
+
   it("names each colour by both hue and pattern", async () => {
     const user = userEvent.setup();
     const onValue = vi.fn();