From 49e9e5adcc8d8c8c19b5f00b228a7f913013505a Mon Sep 17 00:00:00 2001
From: Paul Payne <paul@payne.io>
Date: Tue, 30 Jun 2026 22:41:40 -0700
Subject: [PATCH] Fix Scheduled/Program tables overflowing on small screens

Both tables wrapped a w-full table in overflow-hidden, so on narrow
viewports the intrinsic column width (badges, action buttons, mono
schedule) got clipped and the section blew past the screen. Switch the
wrapper to overflow-x-auto and give the table a min-w so it scrolls
horizontally within its bordered box instead.
---
 app/src/components/ProgramTable.tsx     | 4 ++--
 app/src/components/ScheduledSection.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/components/ProgramTable.tsx b/app/src/components/ProgramTable.tsx
index 544b56e..8e3b0c9 100644
--- a/app/src/components/ProgramTable.tsx
+++ b/app/src/components/ProgramTable.tsx
@@ -64,8 +64,8 @@ export function ProgramTable({ programs }: ProgramTableProps) {
         />
       </div>
 
-      <div className="border border-[var(--border)] rounded-lg overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="border border-[var(--border)] rounded-lg overflow-x-auto">
+        <table className="w-full min-w-[36rem] text-sm">
           <thead>
             <tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
               <SortHeader label="Name" sortKey="id" current={sortKey} dir={sortDir} onSort={toggleSort} />
diff --git a/app/src/components/ScheduledSection.tsx b/app/src/components/ScheduledSection.tsx
index 6d453da..cf826f3 100644
--- a/app/src/components/ScheduledSection.tsx
+++ b/app/src/components/ScheduledSection.tsx
@@ -16,8 +16,8 @@ export function ScheduledSection({ jobs, statuses }: ScheduledSectionProps) {
   return (
     <section>
       <SectionHeader section="scheduled" />
-      <div className="border border-[var(--border)] rounded-lg overflow-hidden">
-        <table className="w-full text-sm">
+      <div className="border border-[var(--border)] rounded-lg overflow-x-auto">
+        <table className="w-full min-w-[36rem] text-sm">
           <thead>
             <tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
               <th className="px-3 py-2 font-medium text-[var(--muted)]">Name</th>