wild-cloud/wild-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Scheduled/Program tables overflowing on small screens

Browse Source 
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.
This commit is contained in:
Paul Payne
2026-06-30 22:41:40 -07:00
parent c28198dab6
commit 49e9e5adcc
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/ProgramTable.tsx
View File

@@ -64,8 +64,8 @@ export function ProgramTable({ programs }: ProgramTableProps) {
/> />
</div> </div>
<div className="border border-[var(--border)] rounded-lg overflow-hidden"> <div className="border border-[var(--border)] rounded-lg overflow-x-auto">
<table className="w-full text-sm"> <table className="w-full min-w-[36rem] text-sm">
<thead> <thead>
<tr className="bg-[var(--card)] border-b border-[var(--border)] text-left"> <tr className="bg-[var(--card)] border-b border-[var(--border)] text-left">
<SortHeader label="Name" sortKey="id" current={sortKey} dir={sortDir} onSort={toggleSort} /> <SortHeader label="Name" sortKey="id" current={sortKey} dir={sortDir} onSort={toggleSort} />

4
app/src/components/ScheduledSection.tsx
View File

@@ -16,8 +16,8 @@ export function ScheduledSection({ jobs, statuses }: ScheduledSectionProps) {
return ( return (
<section> <section>
<SectionHeader section="scheduled" /> <SectionHeader section="scheduled" />
<div className="border border-[var(--border)] rounded-lg overflow-hidden"> <div className="border border-[var(--border)] rounded-lg overflow-x-auto">
<table className="w-full text-sm"> <table className="w-full min-w-[36rem] text-sm">
<thead> <thead>
<tr className="bg-[var(--card)] border-b border-[var(--border)] text-left"> <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> <th className="px-3 py-2 font-medium text-[var(--muted)]">Name</th>