-
Notifications
You must be signed in to change notification settings - Fork 18
Improve clickability of link cells #1886
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
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
The Couple of other approaches:
<Link
className="-m-3 -mr-8 flex h-[calc(100%+1.5rem)] w-[calc(100%+2.75rem)] items-center p-3 pr-8 text-sans-semi-md text-default hover:underline"
aria-label={value}
to={makeHref(value)}
>
{value}
</Link>Potential downside here is keeping the margins of the parent cell and this in sync
<Link
className="flex h-full w-full items-center text-sans-semi-md text-default hover:underline"
aria-label={value}
to={makeHref(value)}
>
{value}
<div className="absolute inset-0" />
</Link> |
|
Third option seems to work the best with minimal jank. Need to do some cross-browser testing. Worth also saying, since using the console with and without this, it does feel like a significant user experience boost. |
|
What if it's just underlined all the time? Then you probably wouldn't need to change the target. |
|
Worth including as an option, I think it gets a bit visually intense but lets give it a go. I do think that can be separate, since it's also about the comfort of the size of the clickable area. But that doesn't necessarily need to be the whole cell. |
|
You can definitely tell the improvement on mobile (not that our layout is optimized for that generally). It does feel pretty good. I agree that the third option seems the least fragile, but I think you should definitely add an inline comment saying what its purpose is. |
david-crespo
left a comment
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.
Looks good to me. I kinda like seeing a hover background color on the cell but it would be redundant with the cursor and link underline.
oxidecomputer/console@644a45b...b9013a3 * [b9013a33](oxidecomputer/console@b9013a33) oxidecomputer/console#1898 * [fb9e9ca5](oxidecomputer/console@fb9e9ca5) oxidecomputer/console#1904 * [9ae29498](oxidecomputer/console@9ae29498) oxidecomputer/console#1897 * [6b894ceb](oxidecomputer/console@6b894ceb) oxidecomputer/console#1901 * [d80d2e7c](oxidecomputer/console@d80d2e7c) oxidecomputer/console#1886 * [2a7da0fa](oxidecomputer/console@2a7da0fa) bump vite for security fix * [700e2700](oxidecomputer/console@700e2700) oxidecomputer/console#1893
oxidecomputer/console@644a45b...b9013a3 * [b9013a33](oxidecomputer/console@b9013a33) oxidecomputer/console#1898 * [fb9e9ca5](oxidecomputer/console@fb9e9ca5) oxidecomputer/console#1904 * [9ae29498](oxidecomputer/console@9ae29498) oxidecomputer/console#1897 * [6b894ceb](oxidecomputer/console@6b894ceb) oxidecomputer/console#1901 * [d80d2e7c](oxidecomputer/console@d80d2e7c) oxidecomputer/console#1886 * [2a7da0fa](oxidecomputer/console@2a7da0fa) bump vite for security fix * [700e2700](oxidecomputer/console@700e2700) oxidecomputer/console#1893
Draft because I want to get people's thoughts on it. I think it might be easier to discover and a nicer experience to make the entire link cell clickable. Presently just the text is clickable.