-
Notifications
You must be signed in to change notification settings - Fork 81
Description
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:





