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

New Issue

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

forbes commented

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

Problem

Different users have different preferences for data density. Power users on large monitors want maximum rows visible. Users on smaller screens or those who prefer readability want more breathing room. Currently there is no way to adjust this — spacing is hardcoded throughout all components.

Proposed Changes

Add a density toggle with two modes:

Compact Mode

Tighter table cell padding (0.15rem 0.4rem)
Smaller font sizes (0.78rem body, 0.72rem headers)
Reduced toolbar/header spacing
Minimal gaps between UI elements
Optimized for maximum rows-per-screen

Comfortable Mode (default)

Current spacing values (or the values after issues #16-#20 are applied)
More visual breathing room
Better for casual use or smaller screens

Implementation

Store preference in localStorage (key: silo-density)
Toggle button in the toolbar (near the existing layout toggle) or in Settings page
Apply via CSS custom properties on <body> or a React context that components read from
Components reference density-aware spacing values instead of hardcoded ones

Impact

MEDIUM — Gives power users control over their experience. Should be implemented after the base density improvements (#16-#20) so "comfortable" mode reflects the already-tightened defaults.

Dependencies

Should be done after #16, #17, #18, #19, #20 (base density improvements)

Files

New: density context/hook (e.g. web/src/hooks/useDensity.ts)
web/src/components/AppShell.tsx (toggle UI)
web/src/components/items/ItemTable.tsx (density-aware padding)
web/src/components/audit/AuditTable.tsx (density-aware padding)
web/src/components/items/ItemsToolbar.tsx (toggle button location)
Various other components that reference spacing values

## Problem Different users have different preferences for data density. Power users on large monitors want maximum rows visible. Users on smaller screens or those who prefer readability want more breathing room. Currently there is no way to adjust this — spacing is hardcoded throughout all components. ## Proposed Changes Add a density toggle with two modes: ### Compact Mode - Tighter table cell padding (`0.15rem 0.4rem`) - Smaller font sizes (`0.78rem` body, `0.72rem` headers) - Reduced toolbar/header spacing - Minimal gaps between UI elements - Optimized for maximum rows-per-screen ### Comfortable Mode (default) - Current spacing values (or the values after issues #16-#20 are applied) - More visual breathing room - Better for casual use or smaller screens ### Implementation - Store preference in `localStorage` (key: `silo-density`) - Toggle button in the toolbar (near the existing layout toggle) or in Settings page - Apply via CSS custom properties on `<body>` or a React context that components read from - Components reference density-aware spacing values instead of hardcoded ones ## Impact MEDIUM — Gives power users control over their experience. Should be implemented after the base density improvements (#16-#20) so "comfortable" mode reflects the already-tightened defaults. ## Dependencies - Should be done after #16, #17, #18, #19, #20 (base density improvements) ## Files - New: density context/hook (e.g. `web/src/hooks/useDensity.ts`) - `web/src/components/AppShell.tsx` (toggle UI) - `web/src/components/items/ItemTable.tsx` (density-aware padding) - `web/src/components/audit/AuditTable.tsx` (density-aware padding) - `web/src/components/items/ItemsToolbar.tsx` (toggle button location) - Various other components that reference spacing values

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.