Dream 61ee9d34cf Refactor report and dashboard table layouts to semantic HTML (#1222) ...

* Refactor report and dashboard tables from div grids to semantic HTML

Convert div-based grid layouts to proper <table>/<thead>/<tbody>/<tr>/<th>/<td>
elements in report views and the dashboard investment summary:

- reports/_breakdown_table + _category_row (income/expense breakdown)
- reports/_trends_insights (monthly trends)
- reports/_net_worth (asset/liability summaries)
- reports/_investment_performance (top holdings)
- pages/dashboard/_investment_summary (top holdings)

Replaces shared/ruler dividers with border-b border-divider on <tr> elements.
Updates test selectors from div[data-category] to tr[data-category] and from
[role="columnheader"] to thead/th.

Closes #1121

* Address PR review feedback

- Restore w-max sm:w-full wrapper on report tables to preserve horizontal
  scroll behavior on narrow screens
- Add sr-only accessible header for net worth amount columns
- Use border-divider instead of border-primary in dashboard investment summary

* Fix rounded corners on semantic table body containers

Move rounded-lg, shadow-border-xs, and bg-container from tbody
(where border-radius and box-shadow don't apply) to a wrapper div
with overflow-hidden. Add bg-container-inset on thead to preserve
the two-tone card design.

2026-03-22 11:50:33 +01:00

7.9 KiB

Raw Blame History

View Raw