canonical / canonical/vanilla-framework
Make modal padding match grid row padding across all breakpoints
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Component/pattern to amend
The modal's padding is set to a value of 16px, while the grid side padding ($grid-margin-width IIRC) changes on breakpoints. This makes it difficult to align stuff inside the modal with the page content underneath. What would help is to make sure the panel has the e xact same padding-left and padding right.
## Visual
In the screenshot above, the underlying rows ion the page are highlgihted by the browser's visualisation. That's what we're trying to align and it proves a little tricky atm. Relevant pr:
## Context
In what context does your amendment solve a problem?
Contributor guide
Research direction
Start by locating the modal and grid styles, then compare their horizontal padding at each responsive breakpoint, especially the grid's $grid-margin-width. Done means the modal panel's left and right padding aligns with the underlying grid rows across all breakpoints; verify this visually at each breakpoint.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, sass
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100