refactor(header): improve mobile header layout with responsive action controls

tests/home-page-layout.test.ts

@@ -7,6 +7,8 @@ describe("home page hierarchy", () => {
 
 		expect(source).toContain("useIsMobile");
 		expect(source).toContain("grid-cols-[minmax(0,0.75fr)_minmax(0,1.25fr)]");
+		expect(source).toContain('"items-center justify-between"');
+		expect(source).toContain("desktopUtilityActionsClasses");
 		expect(source).toContain("AI capture");
 		expect(source).toContain("Event timeline");
 	});
@@ -25,4 +27,43 @@ describe("home page hierarchy", () => {
 		expect(source).toContain("Import");
 		expect(source).toContain("Manual create");
 	});
+
+	test("mobile header gives controls their own full-width row so the title is not squeezed by actions", () => {
+		const source = readFileSync("src/app/page.tsx", "utf8");
+
+		expect(source).toContain("isMobile ? \"w-full\" : undefined");
+		expect(source).toContain("headerActionsClasses");
+		expect(source).toContain('"flex w-full items-center justify-between gap-2"');
+		expect(source).toContain("flex flex-wrap items-center justify-end gap-2");
+	});
+
+	test("mobile header keeps export inside the More menu instead of a dedicated button", () => {
+		const source = readFileSync("src/app/page.tsx", "utf8");
+
+		expect(source).toContain("!isMobile && (");
+		expect(source).toContain("Export");
+		expect(source).toContain("onClick={handleExport}");
+	});
+
+	test("mobile More trigger collapses to an icon button so utility actions fit on one row", () => {
+		const source = readFileSync("src/app/page.tsx", "utf8");
+
+		expect(source).toContain('size={isMobile ? "icon" : "sm"}');
+		expect(source).toContain("moreTriggerLabel");
+		expect(source).toContain('isMobile ? null : "More"');
+	});
+
+	test("mobile header omits the theme toggle so auth and overflow actions have a stable hierarchy", () => {
+		const source = readFileSync("src/app/page.tsx", "utf8");
+
+		expect(source).not.toContain("<ModeToggle />");
+	});
+
+	test("mobile header uses a column layout with a dedicated action row instead of desktop justify-between framing", () => {
+		const source = readFileSync("src/app/page.tsx", "utf8");
+
+		expect(source).toContain("headerLayoutClasses");
+		expect(source).toContain('isMobile ? "flex-col items-start"');
+		expect(source).toContain('"flex w-full items-center justify-between gap-2"');
+	});
 });