-
Notifications
You must be signed in to change notification settings - Fork 34
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
Center position of arrow glyph in table headings #268
base: main
Are you sure you want to change the base?
Conversation
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.
Is there a way to fix it on Edge / Windows without changing it on Chrome / Mac?
I don’t think this is the right solution, but thank you for the contribution. I expect the problem here is that the width of 0.5em isn’t right with some fonts? It would probably be better to use Inter here to ensure consistent rendering across platforms. Alternatively we might need to redesign how we display the sorting control. |
For what it's worth I'm seeing the issue persist in Windows 10 / Chrome Version 128.0.6613.120 as well |
I think it is a font issue because the width of that element is hard-coded to 0.5em. If in the available system font the glyph (▾ or ▴) doesn’t have an actual width of 0.5em, you’ll see exactly the pictured layout problem. My guess is that 0.5em only works for the San Francisco system font on macOS, not for other platforms; it’s not wide enough on Windows. (And the visual width of the glyph isn’t the same as the layout width.) That said, maybe it’s as simple as adding a text-align: center or a display: flex so that if the glyph isn’t 0.5em, it’s at least centered in the reserved area, rather than going too far right or left? |
That seems like a good suggestion. Adding |
Yes it's perfect on Chrome/Firefox/Safari on macOS too 👍 |
Nice! Thanks for verifying 🤝 |
Closes #267.