Tables are scrollable or reformatted on mobile

HTML tables have no built-in responsiveness. At mobile widths, a data table with more than four or five columns will overflow the viewport — either forcing horizontal scroll on the entire page (a WCAG 2.2 SC 1.4.10 Reflow violation) or getting clipped silently. Users lose access to the rightmost columns, which often contain the most actionable data: status, actions, amounts. Scrollable table wrappers preserve all data while keeping the page layout intact. Reformatted stacked layouts are a stronger solution for complex tables but require deliberate CSS work.

Wrap every <table> in a horizontally scrollable container. In JSX:

<div className="overflow-x-auto w-full">
  <table className="min-w-full text-sm">...</table>
</div>

For denser data tables, a stacked mobile layout avoids scroll entirely. In src/app/globals.css:

@media (max-width: 640px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; clip: rect(0 0 0 0); }
  tr { margin-bottom: 1rem; border: 1px solid var(--border); }
  td::before { content: attr(data-label); font-weight: 600; display: block; }
}