Description
After #493 widened the content area from 720px to 960px, the max-width is still a fixed value. On wide monitors (≥1280px), there is significant wasted horizontal space on both sides of the content area.
Expected behavior
The content area should scale responsively to use more of the available viewport width on large screens, while maintaining a reasonable maximum to preserve readability.
Actual behavior
Content is capped at 960px regardless of screen width. On a 1920px display, nearly half the screen is empty margins.
Proposal
Use a CSS custom property (--content-max-w) with a responsive breakpoint:
- Below 1280px: keep the 960px default (no change)
- At 1280px+: scale to
min(90%, 1200px)
This also opens the door for future enhancements (e.g., sidebar-aware content resizing) without changing the Tailwind config.
Fix
PR #496 implements this with +8 −1 lines across 2 files.
Description
After #493 widened the content area from 720px to 960px, the max-width is still a fixed value. On wide monitors (≥1280px), there is significant wasted horizontal space on both sides of the content area.
Expected behavior
The content area should scale responsively to use more of the available viewport width on large screens, while maintaining a reasonable maximum to preserve readability.
Actual behavior
Content is capped at 960px regardless of screen width. On a 1920px display, nearly half the screen is empty margins.
Proposal
Use a CSS custom property (
--content-max-w) with a responsive breakpoint:min(90%, 1200px)This also opens the door for future enhancements (e.g., sidebar-aware content resizing) without changing the Tailwind config.
Fix
PR #496 implements this with +8 −1 lines across 2 files.