List of steps to reproduce (step by step, including full links if applicable):
- Go to https://test.m.wikipedia.org/wiki/Special:Homepage
- Wait for the full content to load
- Click on the vertical gutter space between 2 modules (see screenshots)
What happens?:
The user is taken to the server-side rendered view of that module not benefiting from the already loaded JS modules
What should have happened instead?:
The area should not be clickable at all as it is miss leading and doesn't take advantage of the pre-loaded modules
Software version (if not a Wikimedia wiki), browser information, screenshots, other information, etc: I think this error has been around for a long time
Server-side link click area
Client-side click area (blue + green)
Notes
The fix is easy by changing some CSS styles. I suggest using bottom margins instead of top + vertical padding on the container or use a flex + gap approach. However I was thinking if as a general pattern it would be more benefitial to re-write all client-side links when the JS is loaded so we don't ever run into this kind of issue for a module that has a full-JS experience. It could be done in this task or another.
