From e9dba8c9e55357dab4419ef1211ff3e593643a5a Mon Sep 17 00:00:00 2001
From: Cody Seibert <webdevcody@gmail.com>
Date: Fri, 19 Dec 2025 15:57:36 -0500
Subject: [PATCH] refactor: update kanban responsive scaling tests to adjust
 column width bounds and improve margin calculations

- Changed minimum column width from 240px to 280px to better align with design requirements.
- Enhanced margin calculations to account for the actual container width and sidebar positioning, ensuring more accurate layout testing.
---
 .../tests/kanban-responsive-scaling.spec.ts   | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/apps/ui/tests/kanban-responsive-scaling.spec.ts b/apps/ui/tests/kanban-responsive-scaling.spec.ts
index 7cb8370f..8ff5088e 100644
--- a/apps/ui/tests/kanban-responsive-scaling.spec.ts
+++ b/apps/ui/tests/kanban-responsive-scaling.spec.ts
@@ -110,8 +110,8 @@ test.describe("Kanban Responsive Scaling Tests", () => {
           expect(Math.abs(columnWidth - baseWidth)).toBeLessThan(2);
         }
 
-        // Column width should be within expected bounds (240px min, 360px max)
-        expect(baseWidth).toBeGreaterThanOrEqual(240);
+        // Column width should be within expected bounds (280px min, 360px max)
+        expect(baseWidth).toBeGreaterThanOrEqual(280);
         expect(baseWidth).toBeLessThanOrEqual(360);
 
         // Columns should not overlap (check x positions)
@@ -149,9 +149,30 @@ test.describe("Kanban Responsive Scaling Tests", () => {
     expect(verifiedBox).not.toBeNull();
 
     if (backlogBox && verifiedBox) {
-      // Calculate the left and right margins
-      const leftMargin = backlogBox.x;
-      const rightMargin = 1600 - (verifiedBox.x + verifiedBox.width);
+      // Get the actual container width (accounting for sidebar)
+      // The board-view container is inside a flex container that accounts for sidebar
+      const containerWidth = await page.evaluate(() => {
+        const boardView = document.querySelector('[data-testid="board-view"]');
+        if (!boardView) return window.innerWidth;
+        const parent = boardView.parentElement;
+        return parent ? parent.clientWidth : window.innerWidth;
+      });
+
+      // Calculate the left and right margins relative to the container
+      // The bounding box x is relative to the viewport, so we need to find where
+      // the container starts relative to the viewport
+      const containerLeft = await page.evaluate(() => {
+        const boardView = document.querySelector('[data-testid="board-view"]');
+        if (!boardView) return 0;
+        const parent = boardView.parentElement;
+        if (!parent) return 0;
+        const rect = parent.getBoundingClientRect();
+        return rect.left;
+      });
+
+      // Calculate margins relative to the container
+      const leftMargin = backlogBox.x - containerLeft;
+      const rightMargin = containerWidth - (verifiedBox.x + verifiedBox.width - containerLeft);
 
       // The margins should be roughly equal (columns are centered)
       // Allow for some tolerance due to padding and gaps