taskchef 8.5.0 → 8.5.2

package/src/dashboard/react/App.test.tsx

@@ -154,6 +154,8 @@ test("Settings uses the same capped content layout as List", () => {
   const { container } = render(<DashboardApp connect={false} />);
   const settingsPage = container.querySelector(".taskchef-settings-page");
   expect(settingsPage).toHaveClass("taskchef-content");
+  expect(container.querySelector(".taskchef-header")).not.toHaveClass("taskchef-list-layout");
+  expect(container.querySelector(".taskchef-main")).not.toHaveClass("taskchef-list-layout");
   expect(within(settingsPage as HTMLElement).getByRole("link", { name: "Back to tasks" })).toBeInTheDocument();
   window.location.hash = "";
 });
@@ -208,6 +210,8 @@ test("places the filtered task count below the toolbar and updates it from live
   const summary = document.querySelector<HTMLElement>(".taskchef-results-summary");
   const taskList = screen.getByRole("region", { name: "Tasks" });
 
+  expect(header.querySelector(".taskchef-header")).toHaveClass("taskchef-list-layout");
+  expect(document.querySelector(".taskchef-main")).toHaveClass("taskchef-list-layout");
   expect(projectFilter).toHaveValue("Another project");
   expect(screen.getByRole("combobox", { name: "Updated" })).toHaveValue("All time");
   expect(toolbar?.firstElementChild?.firstElementChild).toContainElement(viewSwitch);
@@ -248,6 +252,8 @@ test("Board ignores the List status filter and restores it on return", () => {
   render(<DashboardApp connect={false} initialFilters={{ status: "completed" }} initialTasks={tasks} />);
   expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
   fireEvent.click(screen.getByRole("radio", { name: "Board" }));
+  expect(document.querySelector(".taskchef-header")).not.toHaveClass("taskchef-list-layout");
+  expect(document.querySelector(".taskchef-main")).not.toHaveClass("taskchef-list-layout");
   const toolbar = document.querySelector<HTMLElement>(".taskchef-toolbar");
   expect(toolbar?.firstElementChild?.firstElementChild).toContainElement(screen.getByRole("radiogroup", { name: "View" }));
   expect(screen.getByRole("radiogroup", { name: "View" }).compareDocumentPosition(screen.getByRole("combobox", { name: "Project" })) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
@@ -256,6 +262,8 @@ test("Board ignores the List status filter and restores it on return", () => {
   expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Working task");
   expect(screen.getByRole("region", { name: "Task board" })).toHaveTextContent("Completed task");
   fireEvent.click(screen.getByRole("radio", { name: "List" }));
+  expect(document.querySelector(".taskchef-header")).toHaveClass("taskchef-list-layout");
+  expect(document.querySelector(".taskchef-main")).toHaveClass("taskchef-list-layout");
   expect(screen.getByRole("radio", { name: /Completed/ })).toBeChecked();
   expect(screen.getByText("Tasks: 1 of 2")).toBeInTheDocument();
 });

package/src/dashboard/react/App.tsx

@@ -239,6 +239,7 @@ export function DashboardApp({
   const visible = useMemo(() => filterTasks(tasks, { project, status, date, now }), [tasks, project, status, date, now]);
   const boardTasks = useMemo(() => filterTasks(tasks, { project, date, now }), [tasks, project, date, now]);
   const board = preferredView === "board";
+  const listLayout = !board && !settings;
   const counts = useMemo(() => statusFilterCounts(tasks, { project, date, now }), [tasks, project, date, now]);
   const statusData = STATUS_FILTERS.map(({ label, value }: { label: string; value: string }) => ({
     label: counts[value] > 0 ? `${label} ${counts[value]}` : label,
@@ -322,7 +323,7 @@ export function DashboardApp({
       <RelativeTimeProvider now={now}>
       <AppShell className="taskchef-shell" padding={0}>
         <Box className="taskchef-header-shell" component="header">
-          <Container className={`taskchef-header${board ? " taskchef-header-board" : ""}`} size="100%">
+          <Container className={`taskchef-header${board ? " taskchef-header-board" : ""}${listLayout ? " taskchef-list-layout" : ""}`} size="100%">
             <Group className="taskchef-header-layout" justify="space-between" wrap="nowrap">
               <Group className="taskchef-header-copy" gap="xs" wrap="nowrap">
                 <BrandIcon />
@@ -344,7 +345,7 @@ export function DashboardApp({
         </Box>
 
         <AppShell.Main>
-          <Container className={`taskchef-main${board ? " taskchef-main-board" : ""}`} pb={80} size="100%">
+          <Container className={`taskchef-main${board ? " taskchef-main-board" : ""}${listLayout ? " taskchef-list-layout" : ""}`} pb={80} size="100%">
             {projectIndex?.status === "unavailable" && (
               <Alert color="yellow" icon={<IconAlertTriangle size={18} />} mb="md" title="Project index unavailable">
                 Task history is still visible. Verify the index and inspect backups before making project changes.

package/src/dashboard/react/components/TaskDetail.tsx

@@ -186,7 +186,7 @@ export function TaskDetail({
       opened={opened}
       overlayProps={{ backgroundOpacity: 0.55, blur: 2 }}
       scrollAreaComponent={ScrollArea.Autosize}
-      size="min(820px, calc(100vw - 32px))"
+      size="min(600px, calc(100vw - 32px))"
       title={<span className="taskchef-visually-hidden">Task details</span>}
       trapFocus
       zIndex={300}

package/src/dashboard/react/styles.css

@@ -30,6 +30,7 @@ body {
 .taskchef-version { margin-inline-start: 0.45rem; color: var(--taskchef-muted); font-size: 0.78em; font-weight: 600; letter-spacing: 0; text-transform: none; }
 .taskchef-brand-icon, .taskchef-brand-icon img { display: block; flex: none; width: 28px; height: 28px; }
 .taskchef-main { max-width: var(--taskchef-page-max-width); padding-top: 8px; padding-inline: var(--taskchef-page-gutter); }
+.taskchef-list-layout { --taskchef-content-max-width: 600px; max-width: calc(var(--taskchef-content-max-width) + 2 * var(--taskchef-page-gutter)); }
 .taskchef-content { width: 100%; max-width: var(--taskchef-content-max-width); }
 .taskchef-toolbar { max-width: none; margin-bottom: 22px; padding: 8px 0 var(--mantine-spacing-md); border: 0; border-bottom: 1px solid var(--taskchef-border); background: transparent; box-shadow: none; }
 .taskchef-toolbar-filters { width: min(100%, 488px); min-width: 0; }