ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-04 09:13:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

e2e fixes

Browse Source
This commit is contained in:
trueheads
2025-12-18 21:01:14 -06:00
parent 96b0e74794
commit 17a2053e79
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/ui/src/hooks/use-responsive-kanban.ts
View File

@@ -1,5 +1,4 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { useAppStore } from "@/store/app-store";
export interface ResponsiveKanbanConfig { export interface ResponsiveKanbanConfig {
columnWidth: number; columnWidth: number;
@@ -9,17 +8,13 @@ export interface ResponsiveKanbanConfig {
padding: number; 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 * Default configuration for responsive Kanban columns
*/ */
const DEFAULT_CONFIG: ResponsiveKanbanConfig = { const DEFAULT_CONFIG: ResponsiveKanbanConfig = {
columnWidth: 288, // 18rem = 288px (w-72) columnWidth: 288, // 18rem = 288px (w-72)
columnMinWidth: 280, // Minimum column width - increased to ensure usability 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 gap: 20, // gap-5 = 20px
padding: 32, // px-4 on both sides = 32px padding: 32, // px-4 on both sides = 32px
}; };
@@ -48,23 +43,20 @@ export function useResponsiveKanban(
...config, ...config,
}; };
// Get sidebar state from the store to account for its width
const sidebarOpen = useAppStore((state) => state.sidebarOpen);
const calculateColumnWidth = useCallback(() => { const calculateColumnWidth = useCallback(() => {
if (typeof window === "undefined") { if (typeof window === "undefined") {
return DEFAULT_CONFIG.columnWidth; return DEFAULT_CONFIG.columnWidth;
} }
// Determine sidebar width based on viewport and sidebar state // Get the actual board container width
// On screens < 1024px (lg breakpoint), sidebar is always collapsed width visually // The flex layout already accounts for sidebar width, so we use the container's actual width
const isLargeScreen = window.innerWidth >= 1024; const boardContainer = document.querySelector('[data-testid="board-view"]')?.parentElement;
const sidebarWidth = isLargeScreen && sidebarOpen const containerWidth = boardContainer
? SIDEBAR_EXPANDED_WIDTH ? boardContainer.clientWidth
: SIDEBAR_COLLAPSED_WIDTH; : window.innerWidth;
// Get the available width (window width minus sidebar and padding) // Get the available width (subtract padding only)
const availableWidth = window.innerWidth - sidebarWidth - padding; const availableWidth = containerWidth - padding;
// Calculate total gap space needed // Calculate total gap space needed
const totalGapWidth = gap * (columnCount - 1); const totalGapWidth = gap * (columnCount - 1);
@@ -79,7 +71,7 @@ export function useResponsiveKanban(
idealWidth = Math.max(columnMinWidth, Math.min(columnMaxWidth, idealWidth)); idealWidth = Math.max(columnMinWidth, Math.min(columnMaxWidth, idealWidth));
return idealWidth; return idealWidth;
}, [columnCount, columnMinWidth, columnMaxWidth, gap, padding, sidebarOpen]); }, [columnCount, columnMinWidth, columnMaxWidth, gap, padding]);
const [columnWidth, setColumnWidth] = useState<number>(() => const [columnWidth, setColumnWidth] = useState<number>(() =>
calculateColumnWidth() calculateColumnWidth()

8
apps/ui/tests/settings-marketing.spec.ts
View File

@@ -96,6 +96,14 @@ test.describe("Settings Marketing Content Tests", () => {
await page.goto("/board"); await page.goto("/board");
await waitForNetworkIdle(page); 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 // Course promo badge should now be hidden
const promoBadge = page.locator('[data-testid="course-promo-badge"]'); const promoBadge = page.locator('[data-testid="course-promo-badge"]');
await expect(promoBadge).not.toBeVisible({ timeout: 5000 }); await expect(promoBadge).not.toBeVisible({ timeout: 5000 });