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
803 stars 166 forks source link

p-modal__header need overflow:auto to prevent margin collapse #5109

Open lyubomir-popov opened 1 month ago

lyubomir-popov commented 1 month ago

Describe the bug

Notice the horizontal rule is placed too close to the title, the margin-bottom of which is ignored due to not tha parent not having overflow-y:auto

image

see how the <hr> is at t he top of the orange margin ^

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

Add any other context about the problem here.

bartaz commented 1 month ago

Line sits correcty under the h2 above it:

image

Overflow won't change anything here. The line that you mention is a pseudo border on the bottom on header element. This header element has it's bottom margin, this margin will always be below the border (or below the ::after element, as in this case).

image

Do we actually need more spacing between h2 and the line? In such case h2 should have bigger bottom margin, or header needs some bottom padding.