Rebuild of the kanban scaling logic, and adding constraints to window scaling logic for electron and web

apps/ui/tests/kanban-responsive-scaling.spec.ts

@@ -5,8 +5,8 @@
  * the available window space without dead space or content being cut off.
  */
 
-import { test, expect } from "@playwright/test";
-import * as fs from "fs";
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
 
 import {
   waitForNetworkIdle,
@@ -15,17 +15,17 @@ import {
   createTempDirPath,
   setupProjectWithPathNoWorktrees,
   waitForBoardView,
-} from "./utils";
+} from './utils';
 
 // Create unique temp dir for this test run
-const TEST_TEMP_DIR = createTempDirPath("kanban-responsive-tests");
+const TEST_TEMP_DIR = createTempDirPath('kanban-responsive-tests');
 
 interface TestRepo {
   path: string;
   cleanup: () => Promise<void>;
 }
 
-test.describe("Kanban Responsive Scaling Tests", () => {
+test.describe('Kanban Responsive Scaling Tests', () => {
   let testRepo: TestRepo;
 
   test.beforeAll(async () => {
@@ -52,12 +52,12 @@ test.describe("Kanban Responsive Scaling Tests", () => {
     cleanupTempDir(TEST_TEMP_DIR);
   });
 
-  test("kanban columns should scale to fill available width at different viewport sizes", async ({
+  test('kanban columns should scale to fill available width at different viewport sizes', async ({
     page,
   }) => {
     // Setup project and navigate to board view
     await setupProjectWithPathNoWorktrees(page, testRepo.path);
-    await page.goto("/");
+    await page.goto('/');
     await waitForNetworkIdle(page);
     await waitForBoardView(page);
 
@@ -122,12 +122,10 @@ test.describe("Kanban Responsive Scaling Tests", () => {
     }
   });
 
-  test("kanban columns should be centered in the viewport", async ({
-    page,
-  }) => {
+  test('kanban columns should be centered in the viewport', async ({ page }) => {
     // Setup project and navigate to board view
     await setupProjectWithPathNoWorktrees(page, testRepo.path);
-    await page.goto("/");
+    await page.goto('/');
     await waitForNetworkIdle(page);
     await waitForBoardView(page);
 
@@ -181,12 +179,12 @@ test.describe("Kanban Responsive Scaling Tests", () => {
     }
   });
 
-  test("kanban columns should have no horizontal scrollbar at standard viewport width", async ({
+  test('kanban columns should have no horizontal scrollbar at standard viewport width', async ({
     page,
   }) => {
     // Setup project and navigate to board view
     await setupProjectWithPathNoWorktrees(page, testRepo.path);
-    await page.goto("/");
+    await page.goto('/');
     await waitForNetworkIdle(page);
     await waitForBoardView(page);
 
@@ -204,4 +202,92 @@ test.describe("Kanban Responsive Scaling Tests", () => {
     // There should be no horizontal scroll at standard width since columns scale down
     expect(hasHorizontalScroll).toBe(false);
   });
+
+  test('kanban columns should fit at minimum width (1500px - Electron minimum)', async ({
+    page,
+  }) => {
+    // Setup project and navigate to board view
+    await setupProjectWithPathNoWorktrees(page, testRepo.path);
+    await page.goto('/');
+    await waitForNetworkIdle(page);
+    await waitForBoardView(page);
+
+    // Set viewport to the new Electron minimum width (1500px)
+    await page.setViewportSize({ width: 1500, height: 900 });
+    await page.waitForTimeout(300);
+
+    // Get all four kanban columns
+    const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+    const verifiedColumn = page.locator('[data-testid="kanban-column-verified"]');
+
+    // Verify columns are visible
+    await expect(backlogColumn).toBeVisible();
+    await expect(verifiedColumn).toBeVisible();
+
+    // Check if horizontal scrollbar is present
+    const hasHorizontalScroll = await page.evaluate(() => {
+      const boardContainer = document.querySelector('[data-testid="board-view"]');
+      if (!boardContainer) return false;
+      return boardContainer.scrollWidth > boardContainer.clientWidth;
+    });
+
+    // There should be no horizontal scroll at minimum width
+    expect(hasHorizontalScroll).toBe(false);
+
+    // Verify columns are at minimum width (280px)
+    const backlogBox = await backlogColumn.boundingBox();
+    expect(backlogBox).not.toBeNull();
+    if (backlogBox) {
+      expect(backlogBox.width).toBeGreaterThanOrEqual(280);
+      expect(backlogBox.width).toBeLessThanOrEqual(360);
+    }
+  });
+
+  test('kanban columns should scale correctly when sidebar is collapsed', async ({ page }) => {
+    // Setup project and navigate to board view
+    await setupProjectWithPathNoWorktrees(page, testRepo.path);
+    await page.goto('/');
+    await waitForNetworkIdle(page);
+    await waitForBoardView(page);
+
+    // Set a viewport size
+    await page.setViewportSize({ width: 1600, height: 900 });
+    await page.waitForTimeout(300);
+
+    // Get initial column width
+    const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+    const initialBox = await backlogColumn.boundingBox();
+    expect(initialBox).not.toBeNull();
+
+    // Find and click the sidebar collapse button
+    const collapseButton = page.locator('[data-testid="sidebar-collapse-button"]');
+    if (await collapseButton.isVisible()) {
+      await collapseButton.click();
+
+      // Wait for sidebar transition (300ms) + buffer
+      await page.waitForTimeout(400);
+
+      // Get column width after collapse
+      const collapsedBox = await backlogColumn.boundingBox();
+      expect(collapsedBox).not.toBeNull();
+
+      if (initialBox && collapsedBox) {
+        // Column should be wider or same after sidebar collapse (more space available)
+        // Allow for small variations due to transitions
+        expect(collapsedBox.width).toBeGreaterThanOrEqual(initialBox.width - 5);
+
+        // Width should still be within bounds
+        expect(collapsedBox.width).toBeGreaterThanOrEqual(280);
+        expect(collapsedBox.width).toBeLessThanOrEqual(360);
+      }
+
+      // Verify no horizontal scrollbar after collapse
+      const hasHorizontalScroll = await page.evaluate(() => {
+        const boardContainer = document.querySelector('[data-testid="board-view"]');
+        if (!boardContainer) return false;
+        return boardContainer.scrollWidth > boardContainer.clientWidth;
+      });
+      expect(hasHorizontalScroll).toBe(false);
+    }
+  });
 });