This is what Jayesh Bhoot looks like, with a lopsided smile on its right, which almost closes his right eye while smiling, which strongly implies that he needs to work on his lazy left-side cheek muscles.

Making tanstack docs more accessible with Stylus

Posted on in ,

Stylus is a browser extension with which you can modify styles on a webpage. I use it to fix accessibility and usability niggles faced on my regularly visited webpages.

This post adds another Stylus fix to the list written by wezm.

My mouse/trackpad is configured to auto-click on rest/hover. Over time, I"ve developed a habit of resting the cursor on any white space of a webpage.

Tanstack.com hosts a collection of headless web widgets to develop web applications. Now, in the tanstack docs, each heading is a clickable anchor, but the clickable area also spans the whole width of the content area. When I subconsciously rest my cursor on the white space besides a heading, the heading and contents are suddenly yanked to the top.

Here is the Stylus fix: 

a.anchor-heading {
    display: inline;
}

Now, the heading still remains an anchor, but the white space besides the heading text stays out of the clickable area.

Update: 19 Feb 2025

Tanner Linsley, the founder of the tanstack ecosystem, saw this post on Bluesky, and prompted me to submit a PR to fix this problem. The PR is now merged.