A fix for the issue of Misoriented Elements in Fullscreen for Beautiful Lyrics

[Mysticc28]

What are you Suggesting?

an Improvement

What is the context behind this Suggestion?

@sanoojes fixed the bug where elements in fullscreen so just posting this here for all those who are facing this issue and want to fix it

What is your Suggestion?

Hello there, there's a quick fix for the misoriented elements in the Beautiful Lyrics extension available thanks to @sanoojes

Step 1 - Copy the below code

.BeautifulLyricsPage.Fullscreen .Content .PlayPanel .SliderBar,
.BeautifulLyricsPage.Fullscreen .Content .PlayPanel .MediaSpace {
    position: relative;
}

Step 2 - Navigate to Spotify>Marketplace>Snippets

Step 3 - Click the 'Add CSS' button in the bottom right corner

Step 4 - Under Custom CSS, paste the code you just copied and add a Snippet name and description as you wish. Should look something like this so far.

Step 5 - Hit Save CSS and done. Your issue should be fixed but incase it isnt, refresh Spotify and check again. Once again, a big thanks to @sanoojes for the fix. Check out his themes, they're really cool.

Suggestion Checklist

• [X] You clearly titled/explained your Suggestion.
• [X] You accurately described/contextualized the reasoning behind your Suggestion.
• [X] IF applicable to your Suggestion, you provided visual examples/references to accurately represent what you are Suggesting.

[McBenjihood]

Thanks, appreciate the help :)

[axeltechtips]

Thank you so much! I was starting to think it was my theme... Much love to you and @sanoojes!

[Alehaaaa]

I would compliment this with fixes for the Maximize and Close buttons in the Now playing view and Lyrics Page:

.BeautifulLyricsPage.Fullscreen .Content .PlayPanel .SliderBar,
.BeautifulLyricsPage.Fullscreen .Content .PlayPanel .MediaSpace {
    position: relative;
}

.Root__main-view:has(.BeautifulLyricsPage) .main-view-container__scroll-node-child,
div.os-host:has(.BeautifulLyricsPage) .main-view-container__scroll-node-child {
    pointer-events: auto !important;
}
#BeautifulLyrics-CardView .Header .Controls button {
    cursor: pointer;
}

Also, if you are using Spotify in a vertical window with Cinema Mode, which will show the Spotify UI behind the background gradient, this will do the trick to hide it. Immmersive

.BeautifulLyricsBackground.BeautifulLyricsPage.Fullscreen .BeautifulLyricsBackground-Container {
    background-color: black;
}

[AgentMonkey00]

You are an actual LIFESAVER!!

[Mysticc28]

You are an actual LIFESAVER!!

Glad I could help, I've just been trying to get it out to as many people as I can facing this issue :)