ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-01-31 20:03:37 +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 { 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()

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 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 });