search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
816 stars 167 forks source link

Make modal padding match grid row padding across all breakpoints #5140

Open lyubomir-popov opened 2 months ago

lyubomir-popov commented 2 months ago

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

image

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: image

Context

In what context does your amendment solve a problem?

bartaz commented 2 months ago

Modal completely covers the page, puts an overlay on top of it. The width of modal may differ from the width of the page on smaller screens. Does it really matter to align it to the grid that is not visible?