kindred/silo
1
1
Fork 0
Code Issues 29 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UI/UX: Compact toolbar spacing #20

New Issue
Closed
opened 2026-02-07 20:33:31 +00:00 by forbes · 0 comments
forbes commented 2026-02-07 20:33:31 +00:00
Owner
Copy Link

Problem

The toolbar areas on ItemsPage and AuditPage have generous padding and gaps between elements, consuming more vertical space than necessary. The toolbar is functional chrome, not content — it should be as compact as possible.

Current Values

ItemsToolbar (web/src/components/items/ItemsToolbar.tsx)

  • Toolbar padding: 0.75rem 0 (12px top/bottom)
  • Toolbar margin: 0.5rem bottom (8px)
  • Gap between elements: 0.75rem (12px)
  • Search input padding: 0.4rem 0.75rem
  • Button padding: varies 0.3-0.4rem
  • Total vertical footprint: ~36px

AuditPage toolbar area

  • Summary bar height: 32px + 0.75rem bottom margin
  • Toolbar margin: 0.5rem bottom

Proposed Changes

  • Reduce toolbar padding from 0.75rem 0 to 0.5rem 0
  • Reduce toolbar margin from 0.5rem to 0.25rem
  • Reduce element gap from 0.75rem to 0.5rem
  • Reduce input padding from 0.4rem 0.75rem to 0.3rem 0.5rem
  • Reduce AuditPage summary bar height from 32px to 24-26px
  • Reduce summary bar bottom margin from 0.75rem to 0.35rem
  • Consistent button padding across all toolbar buttons
  • Target savings: ~12-15px vertical

Impact

LOW-MEDIUM — Saves ~12-15px vertical space. Small individually, but compounds with other density improvements.

Files

  • web/src/components/items/ItemsToolbar.tsx
  • web/src/pages/AuditPage.tsx (summary bar)
  • web/src/components/audit/AuditTable.tsx (if toolbar is there)
## Problem The toolbar areas on ItemsPage and AuditPage have generous padding and gaps between elements, consuming more vertical space than necessary. The toolbar is functional chrome, not content — it should be as compact as possible. ## Current Values ### ItemsToolbar (`web/src/components/items/ItemsToolbar.tsx`) - Toolbar padding: `0.75rem 0` (12px top/bottom) - Toolbar margin: `0.5rem` bottom (8px) - Gap between elements: `0.75rem` (12px) - Search input padding: `0.4rem 0.75rem` - Button padding: varies `0.3-0.4rem` - Total vertical footprint: ~36px ### AuditPage toolbar area - Summary bar height: 32px + `0.75rem` bottom margin - Toolbar margin: `0.5rem` bottom ## Proposed Changes - Reduce toolbar padding from `0.75rem 0` to `0.5rem 0` - Reduce toolbar margin from `0.5rem` to `0.25rem` - Reduce element gap from `0.75rem` to `0.5rem` - Reduce input padding from `0.4rem 0.75rem` to `0.3rem 0.5rem` - Reduce AuditPage summary bar height from 32px to 24-26px - Reduce summary bar bottom margin from `0.75rem` to `0.35rem` - Consistent button padding across all toolbar buttons - Target savings: ~12-15px vertical ## Impact LOW-MEDIUM — Saves ~12-15px vertical space. Small individually, but compounds with other density improvements. ## Files - `web/src/components/items/ItemsToolbar.tsx` - `web/src/pages/AuditPage.tsx` (summary bar) - `web/src/components/audit/AuditTable.tsx` (if toolbar is there)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
forbes
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#20
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?