From 07895e9030be46748a133f28c2c442730a111980 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 3 Jul 2026 06:34:30 +0000 Subject: [PATCH 1/2] Fix sticky column bleed-through when scrolling table on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two bugs caused content from scrolling columns to show through the sticky # and Company columns on mobile horizontal scroll: 1. Sticky td on odd rows used bg-muted/5 (5% opacity) — nearly transparent, letting scrolling columns show through. Now always bg-background (fully opaque) regardless of row parity. 2. Sticky th cells used bg-muted/30 (30% opacity) for the same reason. Changed to bg-background. 3. Added minWidth: max-content on the table so it never compresses below its visible column widths. Without this, w-full collapses the table to 343px on mobile and table-layout:auto ignores cell-level minWidth hints. Added border-r on the Company column to visually separate the sticky area from the scrolling content. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_013XsZSM7E8ShnL5hohYaLWu --- frontend/src/pages/DatabasePage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/DatabasePage.tsx b/frontend/src/pages/DatabasePage.tsx index 83d599f..d5e69c1 100644 --- a/frontend/src/pages/DatabasePage.tsx +++ b/frontend/src/pages/DatabasePage.tsx @@ -908,7 +908,7 @@ export function DatabasePage() { className="overflow-x-auto" style={{ WebkitOverflowScrolling: 'touch' }} > - +
{table.getHeaderGroups().map((headerGroup) => ( @@ -920,7 +920,7 @@ export function DatabasePage() { key={header.id} className={`px-3 py-2.5 text-left text-[10px] font-semibold text-muted-foreground uppercase tracking-wider whitespace-nowrap select-none ${ canSort ? 'cursor-pointer hover:text-foreground transition-colors' : '' - } ${i === 1 ? 'sticky left-[44px] z-10 bg-muted/30' : ''} ${i === 0 ? 'sticky left-0 z-10 bg-muted/30' : ''} ${mobileHiddenColumns.has(header.id) ? 'hidden md:table-cell' : ''}`} + } ${i === 1 ? 'sticky left-[44px] z-10 bg-background border-r border-border/40' : ''} ${i === 0 ? 'sticky left-0 z-10 bg-background' : ''} ${mobileHiddenColumns.has(header.id) ? 'hidden md:table-cell' : ''}`} style={{ width: header.getSize(), minWidth: header.getSize() }} onClick={canSort ? header.column.getToggleSortingHandler() : undefined} > @@ -968,7 +968,7 @@ export function DatabasePage() { key={cell.id} className={`px-3 py-2 ${ mobileHiddenColumns.has(cell.column.id) ? 'hidden md:table-cell' : '' - } ${cellIdx === 0 ? `sticky left-0 z-10 ${rowIdx % 2 === 1 ? 'bg-muted/5' : 'bg-background'}` : ''} ${cellIdx === 1 ? `sticky left-[44px] z-10 ${rowIdx % 2 === 1 ? 'bg-muted/5' : 'bg-background'}` : ''}`} + } ${cellIdx === 0 ? 'sticky left-0 z-10 bg-background' : ''} ${cellIdx === 1 ? 'sticky left-[44px] z-10 bg-background border-r border-border/40' : ''}`} style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }} > {flexRender(cell.column.columnDef.cell, cell.getContext())} From 3a686cf17035a4d2862c1d1f4a0719217d67d60e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 3 Jul 2026 06:59:11 +0000 Subject: [PATCH 2/2] Make Company column scrollable on mobile; only # stays sticky The Company column (220px) was sticky alongside the # column (44px), consuming 264px of a 375px mobile viewport (70%) and leaving little room to view other columns. Removing its sticky positioning lets it scroll away freely. The # column (44px) stays pinned at left-0 to provide row context with minimal space cost. Moved the separator border-r to the # column so the sticky boundary is still visible. Co-Authored-By: Claude Sonnet 4.6 Claude-Session: https://claude.ai/code/session_013XsZSM7E8ShnL5hohYaLWu --- frontend/src/pages/DatabasePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/DatabasePage.tsx b/frontend/src/pages/DatabasePage.tsx index d5e69c1..8164ae8 100644 --- a/frontend/src/pages/DatabasePage.tsx +++ b/frontend/src/pages/DatabasePage.tsx @@ -920,7 +920,7 @@ export function DatabasePage() { key={header.id} className={`px-3 py-2.5 text-left text-[10px] font-semibold text-muted-foreground uppercase tracking-wider whitespace-nowrap select-none ${ canSort ? 'cursor-pointer hover:text-foreground transition-colors' : '' - } ${i === 1 ? 'sticky left-[44px] z-10 bg-background border-r border-border/40' : ''} ${i === 0 ? 'sticky left-0 z-10 bg-background' : ''} ${mobileHiddenColumns.has(header.id) ? 'hidden md:table-cell' : ''}`} + } ${i === 0 ? 'sticky left-0 z-10 bg-background border-r border-border/40' : ''} ${mobileHiddenColumns.has(header.id) ? 'hidden md:table-cell' : ''}`} style={{ width: header.getSize(), minWidth: header.getSize() }} onClick={canSort ? header.column.getToggleSortingHandler() : undefined} > @@ -968,7 +968,7 @@ export function DatabasePage() { key={cell.id} className={`px-3 py-2 ${ mobileHiddenColumns.has(cell.column.id) ? 'hidden md:table-cell' : '' - } ${cellIdx === 0 ? 'sticky left-0 z-10 bg-background' : ''} ${cellIdx === 1 ? 'sticky left-[44px] z-10 bg-background border-r border-border/40' : ''}`} + } ${cellIdx === 0 ? 'sticky left-0 z-10 bg-background border-r border-border/40' : ''}`} style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }} > {flexRender(cell.column.columnDef.cell, cell.getContext())}