From 17a2053e7999e04214e8f3c4f625c296bd044aa8 Mon Sep 17 00:00:00 2001
From: trueheads <awnyrs1@gmail.com>
Date: Thu, 18 Dec 2025 21:01:14 -0600
Subject: [PATCH] e2e fixes

---
 apps/ui/src/hooks/use-responsive-kanban.ts | 28 ++++++++--------------
 apps/ui/tests/settings-marketing.spec.ts   |  8 +++++++
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/ui/src/hooks/use-responsive-kanban.ts b/apps/ui/src/hooks/use-responsive-kanban.ts
index 8f08e908..ffce7569 100644
--- a/apps/ui/src/hooks/use-responsive-kanban.ts
+++ b/apps/ui/src/hooks/use-responsive-kanban.ts
@@ -1,5 +1,4 @@
 import { useState, useEffect, useCallback } from "react";
-import { useAppStore } from "@/store/app-store";
 
 export interface ResponsiveKanbanConfig {
   columnWidth: number;
@@ -9,17 +8,13 @@ export interface ResponsiveKanbanConfig {
   padding: number;
 }
 
-// Sidebar dimensions (must match sidebar.tsx values)
-const SIDEBAR_COLLAPSED_WIDTH = 64; // w-16 = 64px
-const SIDEBAR_EXPANDED_WIDTH = 288; // w-72 = 288px (lg breakpoint)
-
 /**
  * Default configuration for responsive Kanban columns
  */
 const DEFAULT_CONFIG: ResponsiveKanbanConfig = {
   columnWidth: 288, // 18rem = 288px (w-72)
   columnMinWidth: 280, // Minimum column width - increased to ensure usability
-  columnMaxWidth: 400, // Maximum column width - increased for better scaling
+  columnMaxWidth: 360, // Maximum column width to ensure responsive scaling
   gap: 20, // gap-5 = 20px
   padding: 32, // px-4 on both sides = 32px
 };
@@ -48,23 +43,20 @@ export function useResponsiveKanban(
     ...config,
   };
 
-  // Get sidebar state from the store to account for its width
-  const sidebarOpen = useAppStore((state) => state.sidebarOpen);
-
   const calculateColumnWidth = useCallback(() => {
     if (typeof window === "undefined") {
       return DEFAULT_CONFIG.columnWidth;
     }
 
-    // Determine sidebar width based on viewport and sidebar state
-    // On screens < 1024px (lg breakpoint), sidebar is always collapsed width visually
-    const isLargeScreen = window.innerWidth >= 1024;
-    const sidebarWidth = isLargeScreen && sidebarOpen
-      ? SIDEBAR_EXPANDED_WIDTH
-      : SIDEBAR_COLLAPSED_WIDTH;
+    // Get the actual board container width
+    // The flex layout already accounts for sidebar width, so we use the container's actual width
+    const boardContainer = document.querySelector('[data-testid="board-view"]')?.parentElement;
+    const containerWidth = boardContainer
+      ? boardContainer.clientWidth
+      : window.innerWidth;
 
-    // Get the available width (window width minus sidebar and padding)
-    const availableWidth = window.innerWidth - sidebarWidth - padding;
+    // Get the available width (subtract padding only)
+    const availableWidth = containerWidth - padding;
 
     // Calculate total gap space needed
     const totalGapWidth = gap * (columnCount - 1);
@@ -79,7 +71,7 @@ export function useResponsiveKanban(
     idealWidth = Math.max(columnMinWidth, Math.min(columnMaxWidth, idealWidth));
 
     return idealWidth;
-  }, [columnCount, columnMinWidth, columnMaxWidth, gap, padding, sidebarOpen]);
+  }, [columnCount, columnMinWidth, columnMaxWidth, gap, padding]);
 
   const [columnWidth, setColumnWidth] = useState<number>(() =>
     calculateColumnWidth()
diff --git a/apps/ui/tests/settings-marketing.spec.ts b/apps/ui/tests/settings-marketing.spec.ts
index 9fba1921..4964ea90 100644
--- a/apps/ui/tests/settings-marketing.spec.ts
+++ b/apps/ui/tests/settings-marketing.spec.ts
@@ -96,6 +96,14 @@ test.describe("Settings Marketing Content Tests", () => {
     await page.goto("/board");
     await waitForNetworkIdle(page);
 
+    // Wait for Zustand store to rehydrate from localStorage
+    await page.waitForFunction(() => {
+      const storage = localStorage.getItem('automaker-storage');
+      if (!storage) return false;
+      const parsed = JSON.parse(storage);
+      return parsed.state?.hideMarketingContent === true;
+    });
+
     // Course promo badge should now be hidden
     const promoBadge = page.locator('[data-testid="course-promo-badge"]');
     await expect(promoBadge).not.toBeVisible({ timeout: 5000 });