UI/UX: Increase table data density (ItemTable + AuditTable) #18

New Issue

forbes · 2026-02-07T20:33:04Z

forbes commented

2026-02-07 20:33:04 +00:00

Problem

Tables are the primary data display but have loose spacing. On a 1080p screen, the current padding means ~8-10 fewer rows are visible than necessary. Table headers are not sticky, so scrolling loses column context. Description columns are hard-capped at 300-400px even when horizontal space is available.

Current Values

ItemTable (`web/src/components/items/ItemTable.tsx`)

Cell padding: 0.25rem 0.75rem
Header padding: 0.35rem 0.75rem
Header style: textTransform: uppercase, letterSpacing: 0.05em (wastes horizontal space)
Description column: maxWidth: 300 (horizontal) / maxWidth: 400 (vertical)
Row height: ~27px

AuditTable (`web/src/components/audit/AuditTable.tsx`)

Cell padding: 0.4rem 0.75rem (even looser than ItemTable)
Header padding: 0.5rem 0.75rem
Description: maxWidth: 300

Proposed Changes

Reduce ItemTable cell padding to 0.2rem 0.5rem
Reduce ItemTable header padding to 0.3rem 0.5rem
Reduce AuditTable cell padding to 0.25rem 0.5rem (match ItemTable)
Reduce AuditTable header padding to 0.3rem 0.5rem
Remove textTransform: uppercase and letterSpacing from headers — use sentence case
Make table headers sticky (position: sticky; top: 0)
Increase or remove description maxWidth — let it fill available space with flex: 1 or remove the cap entirely
Target row height: ~22px (save ~5px per row)

Impact

HIGH — Fits 8-10 more rows on a 1080p screen. Sticky headers improve usability when scrolling. Wider descriptions reduce truncation of useful text.

Files

web/src/components/items/ItemTable.tsx
web/src/components/audit/AuditTable.tsx

## Problem Tables are the primary data display but have loose spacing. On a 1080p screen, the current padding means ~8-10 fewer rows are visible than necessary. Table headers are not sticky, so scrolling loses column context. Description columns are hard-capped at 300-400px even when horizontal space is available. ## Current Values ### ItemTable (`web/src/components/items/ItemTable.tsx`) - Cell padding: `0.25rem 0.75rem` - Header padding: `0.35rem 0.75rem` - Header style: `textTransform: uppercase`, `letterSpacing: 0.05em` (wastes horizontal space) - Description column: `maxWidth: 300` (horizontal) / `maxWidth: 400` (vertical) - Row height: ~27px ### AuditTable (`web/src/components/audit/AuditTable.tsx`) - Cell padding: `0.4rem 0.75rem` (even looser than ItemTable) - Header padding: `0.5rem 0.75rem` - Description: `maxWidth: 300` ## Proposed Changes - Reduce ItemTable cell padding to `0.2rem 0.5rem` - Reduce ItemTable header padding to `0.3rem 0.5rem` - Reduce AuditTable cell padding to `0.25rem 0.5rem` (match ItemTable) - Reduce AuditTable header padding to `0.3rem 0.5rem` - Remove `textTransform: uppercase` and `letterSpacing` from headers — use sentence case - Make table headers sticky (`position: sticky; top: 0`) - Increase or remove description `maxWidth` — let it fill available space with `flex: 1` or remove the cap entirely - Target row height: ~22px (save ~5px per row) ## Impact HIGH — Fits 8-10 more rows on a 1080p screen. Sticky headers improve usability when scrolling. Wider descriptions reduce truncation of useful text. ## Files - `web/src/components/items/ItemTable.tsx` - `web/src/components/audit/AuditTable.tsx`

forbes referenced this issue

2026-02-07 20:33:49 +00:00

UI/UX: Add user-selectable density mode (compact / comfortable) #21

forbes referenced this issue from a commit

2026-02-09 00:35:29 +00:00

feat(web): add user-selectable density mode with compact/comfortable toggle

forbes referenced a pull request that will close this issue

2026-02-09 00:35:44 +00:00

feat(web): user-selectable density mode (compact/comfortable) #48

forbes closed this issue

2026-02-09 01:20:53 +00:00

Sign in to join this conversation.