jgthms / bulma

Modern CSS framework based on Flexbox
https://bulma.io
MIT License
48.77k stars 3.93k forks source link

Delete button on notification can overlap with the notification content #3777

Open dhafinrayhan opened 2 months ago

dhafinrayhan commented 2 months ago

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework.

I'm using Bulma version [1.0.0]. My browser is: Edge Version 123.0.2420.81 (Official build) (64-bit) Also tested on (which produces the same issue): Firefox 124.0.2 (64-bit) I am sure this issue is not a duplicate.

Description

The delete button on notification can overlap with the content of the notification.

Edge: image

Firefox: image

Steps to Reproduce

  1. This issue can be found on the docs itself. Code to reproduce:
    <div class="notification">
      <button class="delete"></button>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
      <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
      nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
      et dictum <a>felis venenatis</a> efficitur.
    </div>
  2. You might need to resize the window to allow the text to reach the edge of the notification.

Expected behavior

The delete button on notification should not be able to overlap with the content. Perhaps some padding is needed.

What happens now is that the delete button overlaps with the content and can be seen when the text inside reach the edge of the content.