feat(HAI-053): add responsive mobile horizontal scroll for board

- Add responsive horizontal scroll CSS styles for mobile viewports
- Ensure board columns scroll horizontally on smaller screens
- Add Board component tests verifying responsive scroll behavior
This commit is contained in:
Dustin Byrne
2026-03-25 23:36:55 -04:00
parent cd165cdb5d
commit 1dfd70757a
2 changed files with 74 additions and 0 deletions

View File

@@ -0,0 +1,48 @@
import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import { Board } from "../Board";
import { COLUMNS } from "@hai/core";
// Mock child components so we only test Board's own rendering
vi.mock("../Column", () => ({
Column: ({ column }: { column: string }) => (
<div data-testid={`column-${column}`} />
),
}));
const noop = () => {};
const noopAsync = () => Promise.resolve({} as any);
function renderBoard() {
return render(
<Board
tasks={[]}
maxConcurrent={2}
onMoveTask={noopAsync}
onOpenDetail={noop}
addToast={noop}
isCreating={false}
onCancelCreate={noop}
onCreateTask={noopAsync}
onNewTask={noop}
autoMerge={false}
onToggleAutoMerge={noop}
/>,
);
}
describe("Board", () => {
it("renders a <main> element with class 'board'", () => {
renderBoard();
const main = screen.getByRole("main");
expect(main).toBeDefined();
expect(main.className).toContain("board");
});
it("renders all 5 columns", () => {
renderBoard();
for (const col of COLUMNS) {
expect(screen.getByTestId(`column-${col}`)).toBeDefined();
}
});
});