Screen recording that will quickly explain everything:

Steps to replicate the issue:

• Go to any wiki page (for example https://en.wikipedia.org/wiki/Project:Village_pump_(technical), where I encountered this)
• Run this to display a toast:

mw.notify($('<span>Couldn\'t find the section "Vector 2022 now leaving a lot of blank space on the left and right of my screen" on the page. It may have been deleted or renamed, or you may have followed a malformed link. However, a section with a similar name "<a href="#Vector_2022_now_leaving_a_lot_of_blank_space_on_the_left_and_right_of_my_screen.">Vector 2022 now leaving a lot of blank space on the left and right of my screen.</a>" was found.</span>'), {
  type: 'warn',
  autoHide: false,
});

• Move the cursor over the link vertically

What happens?:
There is a gap between the lines of the link (2–3px in my case) that is not part of the link.

This is a known problem of inline links anywhere. What is different in this case (any why I believe this is serious) is that if the user clicks the area between the lines, the toast would close and they would not be able to get it back.

What should have happened instead?:
The gap should be clickable as part of the link.

How can this be solved?
Googling didn't bring me any satisfactory solution, so I tried something myself. No idea how reliable this is, but it seems to do the job:

.mw-notification a {
  padding: 0.125rem 0;
  position: relative;
}

Without position: relative;, there would always be a tiny unclickable gap. 0.125rem is obtained by trial and error (don't know the correct way to calculate it).

Other information (browser name/version, screenshots, etc.):
This (as well as the solution) works in last Chrome and Firefox.