How customize Spotify web for panel view?

[Dancer18]

Similar to WhatsApp the panel view of the browser version of Spotify has to be modified to get the main functions visible.
In this screenshot the play button is visible yet but in smaller resolution of my notebook it isn't.

I'm looking for a style or userscript to enhance it by removing the first column (marked red).

Any ideas?

[Dancer18]

With Developer Tool I could find a simple solution that is working for my needs although it eliminates the leftside element:

.Root__nav-bar {
    display: none !important;
}

.now-playing-bar {
    width: 250px !important:
}

.now-playing-bar-container {
    min-width: 250px !important;
}

[dude99]

@Dancer18
This shrink the menu into a logo, hover/focus on it to reveal the menu:

@media (max-width: 770px) {

    nav.Root__nav-bar {position: absolute; clip-path: inset(0); transition: .15s ease-out .15s;}
    nav.Root__nav-bar:not(:hover):not(:focus-within) {clip-path: inset(0 calc(100% - 64px) calc(100% - 64px) 0); transform: translate(-22px, -15px);}
    .b00fbb9732b9fe65ded1ba887be5aef9-scss {margin-left: 40px;}
}

[Dancer18]

@dude99 Oh thank you! Great!
I have also mad some more adjustments, so given a width of ~500px this is now the result:

@media (max-width: 770px) {
.now-playing-bar {
    width: 500px !important;
}

.now-playing-bar-container {
    min-width: 300px !important;
    height: 70px !important;
}

.now-playing-bar__right {
    display: none !important;
}

.now-playing-bar__left {
    width: 250px;
}

.now-playing-bar__center {
    width: 220px;
}

nav.Root__nav-bar {position: absolute; clip-path: inset(0); transition: .15s ease-out .15s;}
nav.Root__nav-bar:not(:hover):not(:focus-within) {clip-path: inset(0 calc(100% - 64px) calc(100% - 64px) 0); transform: translate(-23px, -22px);}
}

[dude99]

@Dancer18 updated code, only shrink when width is less than 770px, that way you get a normal view in desktop.

If you want an element to fit the full width, use min/max-width: 100vw;

[Dancer18]

"Offtopic": Since I'm using uBlock Origin there aren't any ad-interruptions in Spotify. Found out yesterday...

[Dancer18]

@dude99 said in How customize Spotify web for panel view?:

@Dancer18 updated code, only shrink when width is less than 770px, that way you get a normal view in desktop.

Yes fine. I updated the whole CSS for it by setting @media (max-width: 770px) at the beginning to include the other rules.