From 4213389ea8fe3ad42cab1a15cdf60f0a3f8dd125 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 01:29:57 +0000
Subject: [PATCH 1/2] fix: restore PageLayout header visibility and add mobile
 actions slot

The title/actions header div had `hidden` with no `md:block` override,
making it permanently invisible at all breakpoints. This caused action
buttons (e.g. Add Category, Reset to Defaults) to never render, silently
breaking any mobile sheet triggers tied to those actions.

- Add `md:block` to restore desktop header visibility
- Add a `md:hidden` actions bar below the nav for mobile so page-level
  actions are accessible on narrow viewports

https://claude.ai/code/session_01CQMMD3NwoJywWphB2woG6M
---
 src/components/PageLayout.tsx | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index d29d8a7..2c7ae4f 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -24,18 +24,25 @@ export const PageLayout = ({
 		<div className="min-h-screen bg-background">
 			<SiteNavigationMenu />
 			{title !== undefined && (
-				<div className="hidden max-w-6xl mx-auto pt-4 pb-2 px-4 md:p-6 print:p-4">
-					<div className="flex items-center justify-between">
-						<h1 className="md:text-2xl font-bold text-foreground flex items-center gap-2">
-							{icon}
-							{title}
-						</h1>
-						{actions && <div className="print:hidden">{actions}</div>}
+				<>
+					<div className="hidden md:block max-w-6xl mx-auto pt-4 pb-2 px-4 md:p-6 print:p-4">
+						<div className="flex items-center justify-between">
+							<h1 className="md:text-2xl font-bold text-foreground flex items-center gap-2">
+								{icon}
+								{title}
+							</h1>
+							{actions && <div className="print:hidden">{actions}</div>}
+						</div>
+						{description && (
+							<p className="text-sm text-muted-foreground mt-1">{description}</p>
+						)}
 					</div>
-					{description && (
-						<p className="text-sm text-muted-foreground mt-1">{description}</p>
+					{actions && (
+						<div className="md:hidden flex justify-end px-4 py-2 border-b border-border print:hidden">
+							{actions}
+						</div>
 					)}
-				</div>
+				</>
 			)}
 			{children}
 		</div>

From 4f72d2346a37855d9ecb582830d8d8b6b74e12fc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 01:33:34 +0000
Subject: [PATCH 2/2] test: update PageLayout actions assertion for dual-slot
 rendering

Actions now render in both the desktop header and the mobile strip, so
getByRole throws on multiple matches. Switch to getAllByRole and assert
at least one button is present.

https://claude.ai/code/session_01CQMMD3NwoJywWphB2woG6M
---
 src/components/PageLayout.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/PageLayout.test.tsx b/src/components/PageLayout.test.tsx
index a19bd68..e882ec4 100644
--- a/src/components/PageLayout.test.tsx
+++ b/src/components/PageLayout.test.tsx
@@ -34,7 +34,9 @@ describe("PageLayout", () => {
 				<p>x</p>
 			</PageLayout>
 		);
-		expect(screen.getByRole("button", { name: "Add" })).toBeInTheDocument();
+		// Actions render in both the desktop header and the mobile strip
+		const buttons = screen.getAllByRole("button", { name: "Add" });
+		expect(buttons.length).toBeGreaterThan(0);
 	});
 
 	it("renders description when title is provided", () => {