Skip to content

Notification bar padding of links only works for complete sentences #1000

@janbrasna

Description

@janbrasna

Description

This was introduced as part of #553, that added link margins in notification bars via 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).

Screen Shot 2024-07-18 at 17 28 18

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

Screen Shot 2024-11-08 at 12 21 31

Actual result

Screen Shot 2024-11-08 at 12 20 53

Environment

This is a frequent bug at kitsune:

Screen Shot 2024-07-18 at 17 17 19

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

It works when the link is a complete sentence:

Screen Shot 2024-07-22 at 16 59 39

but looks bad if it's just a word:

Screen Shot 2024-07-22 at 17 05 15

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug 🪲Something isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions