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

UI/UX: Compact the AppShell header #17

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

Problem

The AppShell header consumes ~65px of vertical space due to generous padding and spacing. Every pixel of vertical chrome reduces the number of data rows visible on screen.

Current Values (AppShell.tsx)

  • Header padding: 1rem 2rem (16px vertical, 32px horizontal)
  • Nav link gap: 1.5rem (24px between links)
  • Nav link padding: 0.5rem 1rem (8px/16px per link)
  • Title font size: 1.5rem
  • Logout button padding: 0.35rem 0.75rem

Proposed Changes

  • Reduce header padding from 1rem 2rem to 0.5rem 1.5rem
  • Reduce nav link gap from 1.5rem to 0.75rem
  • Reduce nav link padding from 0.5rem 1rem to 0.35rem 0.75rem
  • Reduce title font size from 1.5rem to 1.25rem
  • Target header height: ~45px (save ~20px)

Impact

MEDIUM — Saves ~20px vertical space on every page. Combined with other density improvements, this helps fit significantly more data rows on screen.

Files

  • web/src/components/AppShell.tsx
## Problem The AppShell header consumes ~65px of vertical space due to generous padding and spacing. Every pixel of vertical chrome reduces the number of data rows visible on screen. ## Current Values (`AppShell.tsx`) - Header padding: `1rem 2rem` (16px vertical, 32px horizontal) - Nav link gap: `1.5rem` (24px between links) - Nav link padding: `0.5rem 1rem` (8px/16px per link) - Title font size: `1.5rem` - Logout button padding: `0.35rem 0.75rem` ## Proposed Changes - Reduce header padding from `1rem 2rem` to `0.5rem 1.5rem` - Reduce nav link gap from `1.5rem` to `0.75rem` - Reduce nav link padding from `0.5rem 1rem` to `0.35rem 0.75rem` - Reduce title font size from `1.5rem` to `1.25rem` - Target header height: ~45px (save ~20px) ## Impact MEDIUM — Saves ~20px vertical space on every page. Combined with other density improvements, this helps fit significantly more data rows on screen. ## Files - `web/src/components/AppShell.tsx`
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#17
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?