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

.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;
}