Skip to content

Fix external link icon visibility on homepage and docs pages #676

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yamcodes merged 13 commits into from
Dec 31, 2025
Merged

Fix external link icon visibility on homepage and docs pages #676

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e004e05
Initial plan
Copilot Dec 31, 2025
0bdaeaf
Fix external link icon visibility on mobile by removing article scope…
Copilot Dec 31, 2025
8e407b1
Add fallback external link icon styling for MDX links
Copilot Dec 31, 2025
01bd680
Merge branch 'main' into copilot/fix-external-link-icon-mobile
yamcodes Dec 31, 2025
7453db3
[autofix.ci] apply automated fixes
autofix-ci[bot] Dec 31, 2025
9c16145
fix: restrict external link icon styling to links within article elem…
yamcodes Dec 31, 2025
ccdf694
[autofix.ci] apply automated fixes
autofix-ci[bot] Dec 31, 2025
80102b4
Merge branch 'main' into copilot/fix-external-link-icon-mobile
yamcodes Dec 31, 2025
bfa87cd
fix: Prevent external link icons from appearing on image links within…
yamcodes Dec 31, 2025
72afad2
feat: Apply external link styling to `data-external-link` and `rel='n…
yamcodes Dec 31, 2025
3658e89
refactor: remove redundant external link icon selectors
yamcodes Dec 31, 2025
b90176f
Remove duplicate comment
yamcodes Dec 31, 2025
14f6ba0
Merge branch 'main' into copilot/fix-external-link-icon-mobile
yamcodes Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions apps/www/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,13 @@ a[data-external-link]:not(:has(img)):not(.fd-card):not([data-card]):not(
}

/* External links in documentation */
article
a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
[data-no-arrow]
) {
[data-no-arrow]
):not(:has(img)),
article
a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
[class*="fd-"]
):not([data-no-arrow]):not(:has(img)) {
padding-right: 1.1em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
Expand All @@ -54,10 +57,14 @@ a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
}

.dark
article
a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
[data-no-arrow]
) {
):not(:has(img)),
.dark
article
a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
[class*="fd-"]
):not([data-no-arrow]):not(:has(img)) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E");
}
Comment on lines 59 to 69
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Dark mode variant has the same selector scoping inconsistency.

The dark mode selectors exhibit the same issue as the light mode variant: the fallback selector is restricted to article elements while the primary selector is not, and the :not(:has(img)) exclusion is inconsistently applied.

🔎 Proposed fix to align dark mode selectors 
 .dark
 	a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
 		[data-no-arrow]
+	):not(:has(img)),
+.dark
+	a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
+		[class*="fd-"]
+	):not([data-no-arrow]):not(:has(img)),
+.dark
+	article
+	a[data-external-link]:not(.fd-card):not([data-card]):not([class*="fd-"]):not(
+		[data-no-arrow]
+	):not(:has(img)),
+.dark
+	article
+	a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
+		[class*="fd-"]
-	),
-.dark
-	article
-	a[rel*="noopener"][target="_blank"]:not(.fd-card):not([data-card]):not(
-		[class*="fd-"]
-	):not([data-no-arrow]):not(:has(img)) {
+	):not([data-no-arrow]):not(:has(img)) {
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3C/svg%3E");
 }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In apps/www/app/globals.css around lines 59 to 69, the dark-mode rule scoping is
inconsistent: the first selector targets a[data-external-link] globally while
the second is restricted to article and the :not(:has(img)) exclusion is only on
the second selector; update the dark variant so both selectors mirror each other
(same scoping and exclusions) — i.e., make the first selector also scoped to
article (or remove article from the second to match the first) and apply
:not(:has(img)) consistently to both selectors so both selectors have identical
structure and exclusions as the light-mode counterpart.


Expand Down
Loading