See Playlist Name via Hover Tooltip

[rlaphoenix]

Since we cannot reasonably add support for a resizable sidebar to see the playlist names, one option would be to add an on-hover tooltip to see the playlist name.

[mvahaste]

This could be done pretty easily with something like this:

.main-rootlist-rootlist * {
  overflow: visible;
}

.main-rootlist-rootlistItemLink:hover span {
    /* CSS here */
}

But these few lines here that darken the playlist icons on hover also darken the span where the playlist name is and I haven't been able to find a way around it.

.main-rootlist-rootlistItemLink:hover,
.main-createPlaylistButton-button:hover,
.main-collectionLinkButton-collectionLinkButton:hover {
  filter: brightness(50%);
}

Here's what it ends up looking like (don't mind the positioning, filter is weird):

With filter	Without filter

A decent solution might be to find something else to use instead of filter: brightness(50%), but I don't know what that would be.

There's also the case of clamping the length of the playlist name, it can be done with JS but a CSS solution would be cleaner, not sure how to go about it though, since line-clamp obviously only works for lines, and any form of max-width: X didn't work either (at least with my CSS).

The CSS I used

```css .main-rootlist-rootlist * { overflow: visible; } .main-rootlist-rootlistItemLink span { position: absolute; display: block; transform: scale(0); } .main-rootlist-rootlistItemLink:hover span { position: absolute; display: block; left: 64px; background: #323232; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5) !important; padding: 3px 5px 3px 5px; border-radius: var(--border-radius-2); transform: scale(1); transform-origin: left; transition: all ease 100ms; } ```