Fix default links and external link icon position

[cedric07]

Fix des liens par défault sur le soulignements qu'on retrouve toujours de cette manière de configuré dans les figma

fix du positionnement de l'icône des liens externes quand le texte fais plusieurs lignes

Summary by Sourcery

Adjust default link styling and external link icon handling for consistency with design specifications.

Enhancements:

• Unify underline styling and cursor behavior for links and buttons.
• Refine external link icon mixins and positioning to improve alignment and layout consistency.
• Switch the external link icon to use a static SVG asset instead of an inlined SVG mask definition.

---

Note

Low Risk
Low risk styling-only changes, but it affects global a/button text-decoration and how external-link icons are rendered, so regressions would be visual across the site.

Overview
Fixes default link presentation to better match design specs by standardizing underline rendering (text-decoration-thickness, text-underline-position, and disabling ink skipping) across a and button.

Reworks the text-icon mixins so external-link icons use static SVG assets (mask-image: url(../img/static/#{$icon}.svg)) and improves layout for multi-line links (adds min-width, mask-size: contain, and a dedicated text-external-icon mixin with corrected inline alignment). Also removes the inlined external SVG from get-svg-url and adds new arrow.svg/external.svg files under src/img/static.

^{Reviewed by Cursor Bugbot for commit 99023d2. Bugbot is set up for automated code reviews on this repo. Configure here.}

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Standardizes underline styling for links and buttons and refactors the external-link icon implementation to use a dedicated mixin and static SVG asset with improved alignment.

Class diagram for updated SCSS mixins and link styles

classDiagram
    direction LR

    class text_icon {
        <<mixin>>
        +display inline-flex
        +gap $gap
        +align-items center
        +&::$position width $size
        +&::$position min-width $size
        +&::$position height $size
        +&::$position content ""
        +&::$position background-color $color
        +&::$position mask-image url(../img/static/#icon.svg)
        +&::$position mask-position center
        +&::$position mask-repeat no-repeat
        +&::$position transition background-color .5s $ease-out-expo
    }

    class text_external_icon {
        <<mixin>>
        +display inline-block
        +gap 0
        +&::$position display inline-block
        +&::$position margin-inline-start $gap
        +&::$position vertical-align middle
    }

    class a_base {
        <<selector a>>
        +text-decoration none
        +color $link-color
        +cursor pointer
        +hover underline
    }

    class a_target_blank {
        <<selector a[target=_blank]>>
        +@include text_external_icon(external)
    }

    class a_button_shared {
        <<selector a,button>>
        +text-decoration-thickness 1px !important
        +text-underline-position from-font
        +text-decoration-skip-ink none
        +cursor pointer
    }

    class link_external_class {
        <<selector .link-external>>
        +@include text_external_icon(external)
    }

    text_external_icon ..|> text_icon : uses
    a_target_blank ..> text_external_icon : includes
    link_external_class ..> text_external_icon : includes
    a_base <|-- a_target_blank
    a_button_shared ..> a_base : shares underline styling

Loading

File-Level Changes

Change	Details	Files
Standardized base styling for links and buttons, including underline behavior and external-link handling.	Updated anchor elements with target="_blank" and the .link-external utility class to use the text-external-icon mixin instead of the generic text-icon mixin. Introduced shared underline and cursor styles for both a and button elements (fixed thickness, from-font underline positioning, no ink skipping, pointer cursor).	src/scss/03-base/_links.scss
Refined text icon mixins to better support external icons and use file-based SVGs instead of encoded content.	Removed relative positioning from the base text-icon mixin and added min-width to the pseudo-element to stabilize icon layout. Changed the mask-image source in text-icon to reference SVG files from ../img/static instead of using get-svg-url(). Adjusted text-external-icon to override display to inline-block, remove flex gap, and add margin and vertical-align on the pseudo-element for correct icon spacing and alignment.	src/scss/02-tools/_m-text-icon.scss
Cleaned up unused inline SVG mapping and added a static external icon asset.	Removed the "external" SVG entry from the get-svg-url map, since the external icon is now loaded from a static SVG file. Added a new external.svg file under the static image directory to be used by the text-icon masks.	src/scss/02-tools/_f-get-svg-url.scss src/img/static/external.svg

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The global a, button rule with text-decoration-thickness: 1px !important and text-underline-position may unintentionally affect all buttons and any custom link/button variants; consider scoping these underline styles to specific link/button classes or contexts instead of all anchors and buttons.
• You now set cursor: pointer both in the a rule and in the new a, button block; consider consolidating this to a single place to avoid redundant declarations and make overrides easier to reason about.
• Changing text-icon to use a file-based mask-image: url(../img/static/#{$icon}.svg) while leaving the SVG map function in place for other icons splits the icon-loading strategy; consider either consistently using the helper for all icons or clearly separating which mixins use inline SVG vs. file assets to avoid confusion.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The global `a, button` rule with `text-decoration-thickness: 1px !important` and `text-underline-position` may unintentionally affect all buttons and any custom link/button variants; consider scoping these underline styles to specific link/button classes or contexts instead of all anchors and buttons.
- You now set `cursor: pointer` both in the `a` rule and in the new `a, button` block; consider consolidating this to a single place to avoid redundant declarations and make overrides easier to reason about.
- Changing `text-icon` to use a file-based `mask-image: url(../img/static/#{$icon}.svg)` while leaving the SVG map function in place for other icons splits the icon-loading strategy; consider either consistently using the helper for all icons or clearly separating which mixins use inline SVG vs. file assets to avoid confusion.

## Individual Comments

### Comment 1
<location path="src/scss/03-base/_links.scss" line_range="18-19" />
<code_context>
 	}
 }

+a,
+button {
+	text-decoration-thickness: 1px !important;
+	text-underline-position: from-font;
</code_context>
<issue_to_address>
**issue (bug_risk):** Selector couples anchor and button styles in a way that may cause unintended button underlines and overrides.

This shared `a, button` rule forces `text-decoration` and `cursor: pointer` onto all buttons, which can add unwanted underlines or affect decoration on icon/ghost/unstyled buttons, and also duplicates the existing `cursor: pointer` on `a`. Please narrow the selector (e.g., to link-style buttons or a specific class) or apply these styles only to anchors if the change is link-specific.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}