Skip to content

fix: remove max-width cap on dashboard for ultrawide screens#843

Open
AnrokX wants to merge 16 commits intomainfrom
fix/ultrawide-layout
Open

fix: remove max-width cap on dashboard for ultrawide screens#843
AnrokX wants to merge 16 commits intomainfrom
fix/ultrawide-layout

Conversation

@AnrokX
Copy link
Collaborator

@AnrokX AnrokX commented Mar 12, 2026

Summary

  • .dashboard-wrapper had max-width: 1800px with margin: 0 auto, causing large empty gaps on both sides on ultrawide displays
  • Removed the cap so the dashboard fills the full viewport width

Test plan

  • Open dashboard on an ultrawide monitor (or resize browser window wide)
  • Verify components stretch to fill the full width with no large side gaps
  • Verify normal-width screens still look fine (no change in behavior)

🤖 Generated with Claude Code

AnrokX added 16 commits March 12, 2026 12:18
The dashboard-wrapper had max-width: 1800px with margin: 0 auto,
causing large gaps on both sides of ultrawide displays.
- Remove overflow-y: auto from left and right content columns
- Make bento sections and workspace grid flexible/shrinkable
- Right sidebar shrinks from 420px down to 200px on smaller screens
- Workspace cards use min() to shrink below 260px when needed
- Running services grid no longer scrolls independently
- Responsive breakpoints keep two-column layout longer
…ping

Apply proper CSS flex/grid shrinking chain so all dashboard sections
resize proportionally to fit the screen:

- Use flex: 1 1 0% (not flex: 1) so flex-basis starts at 0
- Add min-height: 0 at every nesting level to allow shrinking
- Use grid-auto-rows: minmax(0, 1fr) so grid rows shrink
- Remove overflow: hidden from structural containers (only on leaf cards)
- Make bento sections, workspace grid, and port cards all shrinkable
… screens

Revert the overcomplicated flex/grid shrinking approach. Instead:
- Restore original layout styles that work well at full size
- Use CSS zoom to scale down the entire dashboard on smaller screens
- 85% at <=1200px, 75% at <=900px, 60% at <=600px
- No clipping, no hidden content, everything just gets smaller
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant