Statistics Page: Not correctly displayed if a lot of libraries are present.

[v3DJG6GL]

Describe the bug I noticed some styling issues on my Jellystat instance, especially since I have a lot of libraries.

Environment Details (please complete the following information):

• OS: TrueNAS Scale
• Browser: LibreWolf
• Jellystat Version: v1.1.0
• Jellyfin Version: 10.9.11

To Reproduce Steps to reproduce the behavior:

1. Go to Statistics page
2. If you have enough libraries, you see the following style issue

Expected behavior

1. Tooltip should be always in front and not behind other elements
2. Using rows would make the appearance much better

Screenshots Here a screenshot of the current situation. You cannot really see it since I had to blur these parts, but the text elements of Play Count By Day - Last 20 Days and Play Count By Hour - Last 20 Days are in front together with the tooltip. This makes it super difficult to distinguish one element from another.

I modified some css values:

• .recharts-tooltip-wrapper.recharts-tooltip-wrapper-left.recharts-tooltip-wrapper-top
  • Adding z-index: 1; helps to keep the tooltip in front
• .p-2.rounded-2.border-0
  • Adding this value helps to split the tooltip in several rows: columns: 3 18em;
• This is the result on larger screens:
• And this on smaller screens. There are two rows instead of three and the tooltip text elements are always in front. But there is still some mess on the background with the library names at Play Count By Day - Last 20 Days and Play Count By Hour - Last 20 Days:

Additional context Add any other context about the problem here.

[CyferShepard]

This, is just Wow. Il look into reworking this page.

[v3DJG6GL]

great, thanks! There are similar issues to the Count By Day - Last 20 Days and Play Count By Hour - Last 20 Days tooltips. Adding columns: 18em 3; to .recharts-tooltip-wrapper.recharts-tooltip-wrapper-left.recharts-tooltip-wrapper-top helps too, but it for sure needs more works than just that ;)