Firefox 53.0.2 in Mint 18.1.
I found a few examples of making the clickable (target?) area of buttons, links larger. There may be drawbacks and several ways may work.
One issue may the type "you'll have to live with it"
For tab close button (I use TabMix Plus), when I add "display: block", then set the height & width, the extra width takes space from the tab titles. There may be no way around this - that's what I'm asking.
Is there a way to make the clickable area larger that doesn't take space from tab titles, but still enlarges the close button click area when hovered?
One way would be if it's possible to either move the close 'X' farther to R end of tab, and have the "display: block" area align w/ the R tab edge. Tabs are rounded - adding an outside radius on the top-right is easy enough.
I seem to have moved the 'X' farther to tab R edge using a negative margin. Not sure if this is the best way.
For .tab-close-button, when I add "display: block", then set the height & width, the extra width takes space from the tab titles. There may be no way around this - that's what I need to know.
For testing, this is what I came up with so far to minimize covering unfocused / unhovered tab titles
-moz-image-region: rect(0, 48px, 16px, 32px) !important;
display: block; /*** makes button a "block" - allow adjusting H, W of clickable area. ***/
width: 20px; /*** Sets clickable size; narrower width - hide less tab title, or find a way not to cover tab text. ***/
/*** On hover close, separate background-color from white X with small, red background. ***/
Transparent background is definitely not it; if using -moz-image-region: with the 4 icon positions, & a transparent background, it displays all 4 close tab "X's" at once.