Fix sidebar content overflow and set correct window taskbar icon
The sidebar config panel content was overflowing its container width, causing project names and directory paths to be clipped. Added min-w-0 and overflow-hidden to flex containers, and restructured folder path config rows to stack vertically instead of cramming into one line. The Windows taskbar was showing a black square because no default window icon was set at runtime. Added default_window_icon() call in the Tauri builder using the app's icon.png. Also adds vitest test infrastructure with tests verifying both fixes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
54
app/src/components/layout/Sidebar.test.tsx
Normal file
54
app/src/components/layout/Sidebar.test.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import Sidebar from "./Sidebar";
|
||||
|
||||
// Mock zustand store
|
||||
vi.mock("../../store/appState", () => ({
|
||||
useAppState: vi.fn((selector) =>
|
||||
selector({
|
||||
sidebarView: "projects",
|
||||
setSidebarView: vi.fn(),
|
||||
})
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock child components to isolate Sidebar layout testing
|
||||
vi.mock("../projects/ProjectList", () => ({
|
||||
default: () => <div data-testid="project-list">ProjectList</div>,
|
||||
}));
|
||||
vi.mock("../settings/SettingsPanel", () => ({
|
||||
default: () => <div data-testid="settings-panel">SettingsPanel</div>,
|
||||
}));
|
||||
|
||||
describe("Sidebar", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("renders the sidebar with content area", () => {
|
||||
render(<Sidebar />);
|
||||
expect(screen.getByText("Projects")).toBeInTheDocument();
|
||||
expect(screen.getByText("Settings")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("content area has min-w-0 to prevent flex overflow", () => {
|
||||
const { container } = render(<Sidebar />);
|
||||
const contentArea = container.querySelector(".overflow-y-auto");
|
||||
expect(contentArea).not.toBeNull();
|
||||
expect(contentArea!.className).toContain("min-w-0");
|
||||
});
|
||||
|
||||
it("content area has overflow-x-hidden to prevent horizontal scroll", () => {
|
||||
const { container } = render(<Sidebar />);
|
||||
const contentArea = container.querySelector(".overflow-y-auto");
|
||||
expect(contentArea).not.toBeNull();
|
||||
expect(contentArea!.className).toContain("overflow-x-hidden");
|
||||
});
|
||||
|
||||
it("sidebar outer container has overflow-hidden", () => {
|
||||
const { container } = render(<Sidebar />);
|
||||
const sidebar = container.firstElementChild;
|
||||
expect(sidebar).not.toBeNull();
|
||||
expect(sidebar!.className).toContain("overflow-hidden");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user