PolicyEngine / PolicyEngine/policyengine-app-v2
Mobile: white panel overlaps main content area
Open
Beginner friendly
Nobody has claimed this yet.
bug
- Dominant language
- HTML
- Stars
- 1
- Forks
- 3
- Avg merge
- 1d 50m
- Merged PRs (30d)
- 39
Description
Description
On mobile breakpoints, a white panel (~300px wide) appears on the right side of the screen, partially hiding the main content area. This is the sidebar's reserved space bleeding through.
Root cause
In app/src/components/StandardLayout.tsx, the <main> element has max-w-[calc(100vw-300px)] which always reserves 300px for the sidebar — even on mobile where the sidebar is hidden (hidden sm:block).
Reproduction
- Open any calculator page (e.g.
/us/reports) - Resize browser to mobile width (or use DevTools device toolbar)
- White panel visible on the right side
Notes
- Exists on current Vite production deployment as well — not a regression
- Fix likely needs a responsive
max-w(e.g.sm:max-w-[calc(100vw-300px)]and full width on mobile)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open app/src/components/StandardLayout.tsx and inspect the
element's responsive width classes alongside the hidden sm:block sidebar. Reproduce the issue from /us/reports at a mobile width, then verify that the content uses the full width on mobile while the sidebar spacing remains correct from the sm breakpoint upward.Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100