UI/UX: Remove max-width constraint and reduce main container padding #16

New Issue

forbes · 2026-02-07T20:32:28Z

forbes commented

2026-02-07 20:32:28 +00:00

Problem

The <main> element in AppShell.tsx has maxWidth: 1400px and padding: 2rem (32px all sides). On typical 1920px+ monitors this wastes significant horizontal space — leaving large empty margins on both sides. Tables, forms, and data grids are all constrained to ~1336px usable width.

Proposed Changes

Remove or significantly raise maxWidth: 1400 from <main> in AppShell.tsx (e.g. remove entirely, or raise to 100%)
Reduce main padding from 2rem to 1rem or 1rem 1.5rem
Verify all pages (Items, Projects, Schemas, Audit, Settings) render correctly at full width
Login page should retain its centered narrow layout (it has its own maxWidth: 400)

Impact

HIGH — Immediately reclaims horizontal space on every page. Tables gain room for more visible columns and longer text before truncation.

Files

web/src/components/AppShell.tsx (primary change)
All page components (verify rendering)

## Problem The `<main>` element in `AppShell.tsx` has `maxWidth: 1400px` and `padding: 2rem` (32px all sides). On typical 1920px+ monitors this wastes significant horizontal space — leaving large empty margins on both sides. Tables, forms, and data grids are all constrained to ~1336px usable width. ## Proposed Changes - Remove or significantly raise `maxWidth: 1400` from `<main>` in `AppShell.tsx` (e.g. remove entirely, or raise to `100%`) - Reduce main padding from `2rem` to `1rem` or `1rem 1.5rem` - Verify all pages (Items, Projects, Schemas, Audit, Settings) render correctly at full width - Login page should retain its centered narrow layout (it has its own `maxWidth: 400`) ## Impact HIGH — Immediately reclaims horizontal space on every page. Tables gain room for more visible columns and longer text before truncation. ## Files - `web/src/components/AppShell.tsx` (primary change) - All page components (verify rendering)

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-07 20:52:01 +00:00

feat(web): remove max-width constraint and reduce main padding

forbes closed this issue

2026-02-07 21:00:48 +00:00

forbes referenced a pull request that will close this issue

2026-02-08 19:46:11 +00:00

feat: production React SPA, file attachments, and UI improvements #24

Sign in to join this conversation.