-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Fix max-w on tags in the sidebar #5256
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.
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
base: main
Are you sure you want to change the base?
Conversation
03ec45b to
76c7783
Compare
ab7ebc6 to
38d4627
Compare
38d4627 to
174e8b3
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR fixes a tag truncation issue in Firefox on Linux by changing the max-width calculation for tags in the sidebar from pixel-based (16px) to font-relative units (1em). This ensures proper rendering across different font size settings and browsers.
- Changed
max-w-[calc(100%-16px)]tomax-w-[calc(100%-1em)]in TagsSection component
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| > | ||
| <HashIcon className="w-4 h-auto shrink-0" /> | ||
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-16px)]"> | ||
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]"> |
Copilot
AI
Nov 18, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The calculation calc(100%-1em) accounts for the HashIcon with w-4 class, which in Tailwind CSS is 1rem (not 1em). Consider using 1rem instead of 1em for consistency with Tailwind's spacing system, as w-4 equals 1rem (16px at default font size). While both may work similarly in many cases, rem is based on the root font size while em is based on the current element's font size, which could lead to subtle layout differences.
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]"> | |
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1rem)]"> |
| > | ||
| <HashIcon className="w-4 h-auto shrink-0" /> | ||
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-16px)]"> | ||
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]"> |
Copilot
AI
Nov 18, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The margin-left spacing ml-0.5 (0.125rem or 2px) between the HashIcon and the content div is not accounted for in the max-width calculation. The calculation should be calc(100% - 1em - 0.125rem) to accurately account for both the icon width and the left margin, preventing potential overflow issues.
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em)]"> | |
| <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 max-w-[calc(100%-1em-0.125rem)]"> |
In Firefox on Linux the tags on the sidebar are truncated even shorter tags. It might be my larger than usual min fonts or something because Chromium on the same machine doesn't have this problem. Anways, changing the 16px to 1em works fine with short and long tags.
