Larger padding area on status action buttons

[shuuji3]

Pitch

This is a proposal to increase action button padding on each status card without changing the actual status card size. Enlarging the action buttons helps us to click/tap and can prevent false click/tap.

Currently, I'm experimenting with this change for only a multi-column view using the Stylus browser extension. But I'm happy to make a new PR to implement actual changes as I can write JavaScript/HTML/CSS.

Here are screenshots of my experiment: (left: before / right: after, the background color and grid are shown just for visual aid here)

You can try this change by yourself by installing this userstyle (need to edit for other domains): mastodon.social - larger action button — UserStyles.world

Motivation

I sometimes experience the failure to click the action button due to a relatively small clickable area. Then, I have to click the button carefully again. That experience was a bit frustrating to me and I noticed there was still enough margin around the small button area in the current UI. So it could be improved without large UI changes such as enlarging status height much.

Also, a larger button should be beneficial from the point of view of accessibility, especially for mobile users and high-resolution desktop users, who can see relatively small buttons.

I've searched the past issue but couldn't find a similar proposal. Since I'm new to this project, sorry if I missed something similar. Thanks!

[shuuji3]

Here's a preview for the default single column mode:

Actually, the same style is working without change.

[LeoSantich]

This issue appears to be open and still requiring work from a beginner. I would love to help if possible.