fix(collections): make per-card remove buttons usable on touch
The remove buttons on a collection's cards were revealed only on hover / focus-within (opacity 0 → 1), so on touch they were invisible and undiscoverable. Show them persistently at the 640px breakpoint and enlarge the hit area from 24px to 32px (kept below the full 44px floor because the button floats over a 4-up cover thumbnail). Test pins the CSS contract (jsdom can't evaluate @media): the mobile block makes `.remove` opaque. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -406,6 +406,19 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Touch has no hover, so the reveal-on-hover treatment leaves the
|
||||
remove buttons invisible and undiscoverable. Show them persistently
|
||||
and enlarge the hit area on phones. (Capped well below 44px because
|
||||
the button floats over a 4-up cover thumbnail — a full touch-floor
|
||||
square would swallow the cover.) */
|
||||
@media (max-width: 640px) {
|
||||
.remove {
|
||||
opacity: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user