Use the popover property consistently across cards

[cj12312021]

For some strange reason, performer, studio, and tag cards don't use the popovers property to handle the popovers, while the gallery, image, movie, and scene cards do. This pull request fixes this inconsistency. With this fix, it is now possible to add simple CSS to fix the hovering popover issue than can sometimes be seen in cards.

With this fix, the margin-top: auto style on the hr element can now consistently position the popover at the bottom of the card. Lucie Novac's card shows the issue without this fix. Salee Lee's card was edited in the image below to simulate this fix.

[DogmaDragon]

How will popovers look when there are 100+ or 1000+ items attached? Like studios or popular tags?

[cj12312021]

It would behave the same as it did before:

[cj12312021]

Here are screenshots of tags from with the change.

(I did hack in the values to simliate overflow)

Also note that this change does not include the margin CSS I mentioned earlier. I intentionally excluded that CSS.

[DogmaDragon]

Here are screenshots of tags from with the change. (I did hack in the values to simliate overflow)

Also note that this change does not include the margin CSS I mentioned earlier. I intentionally excluded that CSS.

👍 sorry I was thinking about hover, not popover, been doing other things when this pinged and I completely misunderstood what was happening...

[cj12312021]

👍 sorry I was thinking about hover, not popover, been doing other things when this pinged and I completely misunderstood what was happening...

No worries

[ghost]

This broke my css snipset so hard it cant be repaired :/
I used to hide the bottom part when not in "hover" but now that its has a different parent, it cant be done anymore...
https://discord.com/channels/559159668438728723/644934273459290145/1034948111614890065
I will need custom js to reposition it where it was before in the tree. Sad..

Also i dont understand why it is cleaner to get the button group outside of the card section. The button is part of the card section. This sounds like a dirty fix to your other issue

[cj12312021]

The card components were written with a popover attribute that, before the change, was only properly used by the movie, gallery, and scene cards. The inconsistency there made creating a clean recommendation/front page tricky when I initially did that work. At the time, I could only properly fix the spacing issue on the cards I mentioned earlier. This tweak is the difference between cards that look like:

Compared to:

I think it's hard to argue which of the 2 is better. If you want to share your CSS on discord, I could help you with a fix.