dc7024d98a
A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
10 lines
No EOL
411 B
TypeScript
10 lines
No EOL
411 B
TypeScript
// Right-edge fade telling you a wide table scrolls sideways.
|
|
// pointer-events-none so it never swallows a tap on the row underneath.
|
|
export function ScrollFade({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={`pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-white to-transparent dark:from-surface ${className}`}
|
|
/>
|
|
);
|
|
} |