Notification bar padding of links only works for complete sentences

[janbrasna]

Description

This was introduced as part of #553, that added link margins in notification bars via d71eae8:

protocol/src/assets/sass/protocol/components/_notification-bar.scss

Lines 31 to 37 in d71eae8

	a:link,
	a:visited {
	color: inherit;
	display: inline-block;
	font-size: inherit;
	font-weight: 700;
	margin: 0 $spacing-sm;

^^ adding the extra $spacing-sm there.

It is often seen at mozilla/sumo where links are at the end of sentences right before punctuation. This margin moves the interpunction weirdly around, making it feel like a bug (or at least from typography pov it's somewhat surprising to see this).

Steps to reproduce

https://protocol.mozilla.org/components/detail/notification-bar--error

Change the error text to include link inline within a sentence, e.g. from:

• "Error! Something has gone horribly wrong. Undo?"
  to
• "Error! Something has gone horribly wrong. You can undo the last action."

Expected result

Actual result

Environment

This is a frequent bug at kitsune:

Screen.Recording.2024-07-18.at.17.30.07.mov

It works when the link is a complete sentence:

but looks bad if it's just a word:

[janbrasna]

(Kindly looping in @akatsoulas & @emilghittasv for visibility — to confirm whether that's a bug, or it works as intended for them being perhaps the biggest consumer?)

[akatsoulas]

Thanks @janbrasna for this flag! I will have a look this week.