fix(service-map): stop horizontal overflow from mismatched bleed margin#156
Merged
Conversation
The service-map route wrapped the map in a `-mx-6 -mb-6` bleed to extend the ReactFlow canvas edge-to-edge, but its parent PageLayout.ScrollArea only pads by `p-4` (1rem). The 1.5rem negative margin overshot the 1rem padding by 0.5rem per side, pushing content past the overflow-auto box and producing a horizontal scrollbar. Match the bleed to the parent padding (`-mx-4 -mb-4`). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JP5QicYhXFPZx5PYBqs3rb
Contributor
|
Your LLM provider API key was rejected. Rotate the key in your provider dashboard, then update the matching GitHub Actions secret. Update repo secret → · Model settings → · Setup docs → · Ask in Discord →
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Service Map page (
/service-map) rendered with an unwanted horizontal scrollbar.The map wrapper used a
-mx-6 -mb-6negative-margin "bleed" to push the ReactFlow canvas edge-to-edge, but its parentPageLayout.ScrollAreaonly pads its content byp-4(1rem). The-mx-6/-mb-6bleed pulls 1.5rem, overshooting the parent padding by 0.5rem per side (1rem total horizontally). SinceScrollAreaisoverflow-auto, that overshoot surfaced as a horizontal scrollbar.service-map.tsxwas the only route using a-mx-6/-mb-6bleed — every other page that bleeds already matches itsp-4parent.Change
apps/web/src/routes/service-map.tsx— change the wrapper from-mx-6 -mb-6to-mx-4 -mb-4so the bleed exactly cancels the parent'sp-4padding. The map still spans the full content width edge-to-edge; no more overshoot, no horizontal scrollbar.Testing
PageLayout.ScrollAreap-4padding, so the wrapper occupies exactly the scroll area's content width.bun typecheckfails in the CI/sandbox on a pre-existing, unrelated error (Cannot find type definition file for 'vite/client'); this change is a Tailwind class-string edit with no type impact.🤖 Generated with Claude Code
Generated by Claude Code