fix(app): align schedules screen shell with app conventions

Move the New schedule button out of the screen header (the only screen
using MenuHeader rightContent) into the content filter row, and match the
History screen's full-width layout instead of the 720px centered column.

Tighten the shared sm SegmentedControl and Button vertical padding so the
status switcher and button sit flush with the host-filter pill; this is a
global sm change and also affects settings and the schedule form sheet.

packages/app/e2e/schedules-project-target.spec.ts

@@ -83,7 +83,7 @@ test.describe("Schedules project target", () => {
     await expect(page).not.toHaveURL(/\/h\//);
     await expect(page.getByTestId("schedules-empty")).toBeVisible();
 
-    await page.getByTestId("schedules-new").click();
+    await page.getByTestId("schedules-empty-new").click();
     await expect(page.getByTestId("schedule-form-sheet")).toBeVisible({ timeout: 10_000 });
     await expect(page.getByTestId("schedule-cwd-trigger")).toHaveCount(0);
 
@@ -127,7 +127,7 @@ test.describe("Schedules project target", () => {
       port: fakePort,
     });
     await expect(page.getByTestId("schedules-empty")).toBeVisible({ timeout: 30_000 });
-    await page.getByTestId("schedules-new").click();
+    await page.getByTestId("schedules-empty-new").click();
     await expect(page.getByTestId("schedule-form-sheet")).toBeVisible({ timeout: 10_000 });
 
     await page.getByRole("button", { name: /select project/i }).click();

packages/app/src/components/schedules/schedules-table.tsx

@@ -24,7 +24,7 @@ interface SchedulesTableProps {
   rows: ScheduleRowView[];
   /**
    * The form sheet is owned by the screen (it serves both create and edit and
-   * shares the header's "New schedule" button), so the table delegates edit
+   * shares the screen's "New schedule" button), so the table delegates edit
    * upward rather than mounting a second sheet here.
    */
   onEditSchedule: (schedule: AggregatedSchedule) => void;
@@ -32,9 +32,9 @@ interface SchedulesTableProps {
 
 /**
  * The schedules list: a single settings-style card of rows across every
- * connected host, in a centered, width-constrained reading column matching the
+ * connected host, in a full-width list matching the History screen. Rows own
- * projects list. Rows own their host-scoped mutations (pause/resume/run/delete
+ * their host-scoped mutations (pause/resume/run/delete via the mutations hook +
- * via the mutations hook + a destructive confirm) and delegate editing upward.
+ * a destructive confirm) and delegate editing upward.
  */
 export function SchedulesTable({ rows, onEditSchedule }: SchedulesTableProps): ReactElement {
   return (
@@ -145,14 +145,9 @@ function SchedulesTableRow({
   );
 }
 
-const CONTENT_MAX_WIDTH = 720;
-
 const styles = StyleSheet.create((theme) => ({
-  // Center the card in a readable column, matching settings and projects.
+  // Full-width list padding matching the History screen.
   listContent: {
-    width: "100%",
+    paddingHorizontal: { xs: theme.spacing[3], md: theme.spacing[6] },
-    maxWidth: CONTENT_MAX_WIDTH,
-    alignSelf: "center",
-    paddingHorizontal: theme.spacing[4],
   },
 }));

packages/app/src/components/ui/button.tsx

@@ -50,7 +50,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.md,
   },
   sm: {
-    paddingVertical: theme.spacing[2],
+    paddingVertical: theme.spacing[1.5],
     paddingHorizontal: theme.spacing[3],
     borderRadius: theme.borderRadius.md,
   },

packages/app/src/components/ui/segmented-control.tsx

@@ -161,7 +161,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[1],
   },
   segmentSm: {
-    paddingVertical: theme.spacing[2],
+    paddingVertical: theme.spacing[1.5],
     paddingHorizontal: theme.spacing[4],
   },
   segmentMd: {

packages/app/src/screens/schedules-screen.tsx

@@ -154,21 +154,12 @@ function SchedulesScreenContent(): ReactElement {
       }));
   }, [resolvedRows, selectedHost, statusFilter, hosts.length]);
 
-  const headerAction = useMemo(
-    () => (
-      <Button leftIcon={Plus} onPress={openCreate} size="sm" testID="schedules-new">
-        New schedule
-      </Button>
-    ),
-    [openCreate],
-  );
-
   const showLoadError = isError && schedules.length === 0;
   const showHostFilter = hosts.length > 1;
 
   return (
     <View style={styles.container}>
-      <MenuHeader title="Schedules" rightContent={headerAction} />
+      <MenuHeader title="Schedules" />
       <SchedulesScreenBody
         rows={visibleRows}
         hostErrors={hostErrors}
@@ -263,21 +254,26 @@ function SchedulesScreenBody({
   return (
     <View style={styles.body}>
       <View style={styles.filterRow}>
-        {showHostFilter ? (
+        <View style={styles.filterRowControls}>
-          <HostFilter
+          {showHostFilter ? (
-            hosts={hosts}
+            <HostFilter
-            selectedHost={selectedHost}
+              hosts={hosts}
-            onSelectHost={onSelectHost}
+              selectedHost={selectedHost}
-            triggerTestID="schedules-host-filter-trigger"
+              onSelectHost={onSelectHost}
+              triggerTestID="schedules-host-filter-trigger"
+            />
+          ) : null}
+          <SegmentedControl
+            size="sm"
+            value={statusFilter}
+            onValueChange={onStatusFilterChange}
+            options={STATUS_FILTER_OPTIONS}
+            testID="schedules-status-filter"
           />
-        ) : null}
+        </View>
-        <SegmentedControl
+        <Button leftIcon={Plus} onPress={onCreate} size="sm" testID="schedules-new">
-          size="sm"
+          New schedule
-          value={statusFilter}
+        </Button>
-          onValueChange={onStatusFilterChange}
-          options={STATUS_FILTER_OPTIONS}
-          testID="schedules-status-filter"
-        />
       </View>
       <ScrollView
         style={styles.scroll}
@@ -313,8 +309,6 @@ function ScheduleHostErrorsBanner({ errors }: { errors: ScheduleHostError[] }):
   );
 }
 
-const CONTENT_MAX_WIDTH = 720;
-
 const styles = StyleSheet.create((theme) => ({
   container: {
     flex: 1,
@@ -332,16 +326,20 @@ const styles = StyleSheet.create((theme) => ({
     padding: theme.spacing[6],
   },
   filterRow: {
-    width: "100%",
-    maxWidth: CONTENT_MAX_WIDTH,
-    alignSelf: "center",
     flexDirection: "row",
     alignItems: "center",
-    flexWrap: "wrap",
+    justifyContent: "space-between",
     gap: theme.spacing[3],
-    paddingHorizontal: theme.spacing[4],
+    paddingHorizontal: { xs: theme.spacing[3], md: theme.spacing[6] },
     paddingTop: theme.spacing[4],
   },
+  filterRowControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+    flexShrink: 1,
+    flexWrap: "wrap",
+  },
   scroll: {
     flex: 1,
     minHeight: 0,
@@ -352,10 +350,7 @@ const styles = StyleSheet.create((theme) => ({
     paddingBottom: theme.spacing[6],
   },
   errorsBannerWrap: {
-    width: "100%",
+    paddingHorizontal: { xs: theme.spacing[3], md: theme.spacing[6] },
-    maxWidth: CONTENT_MAX_WIDTH,
-    alignSelf: "center",
-    paddingHorizontal: theme.spacing[4],
   },
   errorsBanner: {
     borderWidth: 1,
@@ -369,10 +364,7 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
   },
   filterEmpty: {
-    width: "100%",
+    paddingHorizontal: { xs: theme.spacing[3], md: theme.spacing[6] },
-    maxWidth: CONTENT_MAX_WIDTH,
-    alignSelf: "center",
-    paddingHorizontal: theme.spacing[4],
     paddingVertical: theme.spacing[6],
     alignItems: "center",
   },