Resolve card hover state appearing between items

jellyfin / jellyfin-web

Web Client for Jellyfin

https://jellyfin.org

GNU General Public License v2.0

2.41k stars 1.28k forks source link

Resolve card hover state appearing between items #6320

Open LittleBigOwI opened 1 week ago

LittleBigOwI commented 1 week ago

When navigating the UI, a bug caused cards to display as "hovered" even when the cursor was positioned between two cards.

Changes

Adjusted the margin between cards and set gap in css.

Issues

Couldn't find matching issue for this.

jellyfin-bot commented 1 week ago

Cloudflare Pages deployment

Latest commit	`f29a8b9`
Status	✅ Deployed!
Preview URL	https://9162597c.jellyfin-web.pages.dev
Type	🔀 Preview

View build logs

sonarcloud[bot] commented 1 week ago

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

dmitrylyzo commented 1 week ago

The problem is that gap doesn't work on older web engines (Tizen, webOS).

LittleBigOwI commented 1 week ago

Okay - then what do you think of adding a spacer div to the card layout? This should work on all web engines.

dmitrylyzo commented 1 week ago

Okay - then what do you think of adding a spacer div to the card layout? This should work on all web engines.

Yeah, I was thinking of wrapping the cards with a "card cell" (div with margins), but that would require revising every "card generator" (unfortunately, there are several places where cards are constructed), and I'm not sure there's no logic that strictly requires the card class to be the topmost.

"Card generators": 1, 2, 3, 4, 5