[Suggestion] Adjust Link's underline width

[simurai]

Problem

This came up in QA. Currently, the width of a Link's underline is calculated like:

brand/packages/react/src/Link/Link.module.css

Line 19 in b596487

width: calc(100% - 1.5em);

The - 1.5em is probably meant as "padding" for the arrow icon. But since the icon uses pixels (16px) and also the margin uses pixels (4px), it might not always match the - 1.5em that can depend on a parent's font-size.

On https://github.com/home's case the underline is a bit shorter than the text:

Suggestion

Use px for the underline's "padding":

- width: calc(100% - 1.5em);
+ width: calc(100% - 20px);

---

Or an alternative could be (not sure if possible) to move the underline to the <span> element that contains the text. Then the width could just be width: 100% and the icon doesn't need to be taken into account.

Urgency

Not urgent. We'll add a separate override in the meantime.