Fix target blank icon scaling to match text size on mobile devices#3
Merged
PatrickMatthiesen merged 2 commits intomainfrom Sep 14, 2025
Merged
Conversation
Author
|
@PatrickMatthiesen 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs. I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review. |
Co-authored-by: PatrickMatthiesen <43612965+PatrickMatthiesen@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Target blank icon is very large on phone
Fix target blank icon scaling to match text size on mobile devices
Sep 9, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The external link icon displayed after
target="_blank"links was using a fixed size of0.6rem, causing it to appear disproportionately large on mobile devices and not scale with different text sizes.Problem
The icon had a fixed height regardless of the text size it was attached to, making it look oversized especially on phones where text might be smaller or when used with different font sizes throughout the interface.
Solution
Changed the SVG height from
height="0.6rem"toheight="1em"in the CSS rule for target blank icons. This makes the icon scale relative to the font size of the text it's attached to, ensuring proportional sizing across all devices and text sizes.Technical Details
The change was made in
/src/styles/main.cssin the CSS rule:The fix ensures the icon now properly scales with:
The change is minimal and maintains all existing functionality while improving the visual consistency across different screen sizes and text configurations.
Fixes #2.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.