sulthan/mangaBookmark
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(userscript): widen the edge-tab tap target to 28x72

Browse Source 
The 7px sliver is well below a usable touch target on a phone. An
invisible #hit child extends the hit area inward while the visible tab
stays exactly 7x44. Drops overflow:hidden (it would clip #hit) and moves
the corner clip onto #fill via border-radius: inherit.
This commit is contained in:
Sulthan Zaki
2026-07-28 20:05:28 +07:00
parent 0416354c06
commit fb073cea72
1 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
userscript/manga-bookmark.user.js
+13 -4
View File
@@ -1307,7 +1307,7 @@
// ============================================================ // ============================================================
const TEMPLATE = ` const TEMPLATE = `
<button id="fab" aria-label="Manga bookmarks"><span id="fill"></span></button> <button id="fab" aria-label="Manga bookmarks"><span id="fill"></span><span id="hit"></span></button>
<div id="backdrop"></div> <div id="backdrop"></div>
<aside id="panel" role="dialog" aria-label="Manga bookmarks"> <aside id="panel" role="dialog" aria-label="Manga bookmarks">
<header> <header>
@@ -1340,14 +1340,23 @@
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
background: #6d28d9; opacity: .45; background: #6d28d9; opacity: .45;
box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 2147483646; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 2147483646; cursor: pointer;
touch-action: none; user-select: none; overflow: hidden; touch-action: none; user-select: none;
} }
#fab.left { border-radius: 0 4px 4px 0; } #fab.left { border-radius: 0 4px 4px 0; }
#fab:active { opacity: 1; } #fab:active, #fab.armed { opacity: 1; }
#fab.armed { box-shadow: 0 0 0 2px #c4b5fd; }
#fill { #fill {
position: absolute; left: 0; right: 0; bottom: 0; height: 0; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
background: #c4b5fd; pointer-events: none; background: #c4b5fd; pointer-events: none; border-radius: inherit;
} }
/* Invisible tap extension: the visible sliver is 7x44, this makes it 28x72.
It grows inward (toward the screen centre) because the tab is docked flush
against an edge, so outward is off-screen. */
#hit {
position: absolute; top: -14px; bottom: -14px;
left: -21px; right: 0;
}
#fab.left #hit { left: 0; right: -21px; }
#backdrop { #backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.5); position: fixed; inset: 0; background: rgba(0,0,0,.5);
opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2147483646; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2147483646;