Spotify interface scrolls off-screen

[gdude2002]

Describe the bug As of the latest version of Spotify and Spicetify, I've noticed that it's possible to scroll the Spotify UI off the screen. This can be rectified manually (with the scroll wheel and arrow keys), but it's quite annoying to deal with. Hopefully, it's a simple fix, though.

Thanks for maintaining one of the very few functional light themes for Spotify - appreciate you saving my eyes!

To Reproduce Steps to reproduce the behavior:

1. Open Spotify with the theme enabled
2. Move mouse cursor to the very right side of the window and scroll down
3. Open the lyrics viewer or use the arrow keys to scroll left and right

Screenshots

Desktop Setup

• Operating System: Windows 11
• Spotify: 1.2.17.834.g26ee1129
• Spicetify: 2.22.1
• Theme: Both 4.6 from the marketplace and main branch manual install (https://github.com/JulienMaille/spicetify-dynamic-theme/commit/35408c54c36c193cdc984350d973ad530a1d3514)

Other Extensions

• GoToSong (huhridge)
• listPlaylistsWithSong (huhridge)
• SkipStats (huhridge)

Logs

These logs correspond to a manual installation of the current version of the theme from the main branch.

extension.js:8 Initializing Spicetify Marketplace v0.8.9
extension.js:8 Loaded Marketplace extension
xpui.js:1 cosmos-connector:  fetchAdForSlot endpoint=%o sp://ads/v1/ads/hpto
gew1-spclient.spotify.com/remote-config-resolver/v3/configuration:1     Failed to load resource: the server responded with a status of 404 ()
vendor~xpui.js:29 provider:transport resolve error T Object
f @ vendor~xpui.js:29
index.html:1 Uncaught (in promise) T
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/vendor~xpui.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/home-hpto.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/1274.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/5621.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/xpui-desktop-modals.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/9601.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load source map: Could not load content for https://xpui.app.spotify.com/home-v2.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED

[virtualgurel]

I came here to report the same thing. It probably happens because the rotating background album cover is too big and not restricted.

[JulienMaille]

I came here to report the same thing. It probably happens because the rotating background album cover is too big and not restricted.

Do you have an idea how to prevent this?

[gdude2002]

Do you have an idea how to prevent this?

Has it been confirmed that this is the issue? Were you able to reproduce?

[virtualgurel]

I only know Python. So my answer was more of an observation. I don't know enough js to suggest a solution.

[virtualgurel]

I think you can fix it using "overflow: hidden" in CSS. But while trying I broke js and couldn't fix the animation.

[Ridoou]

Look like you fixed it @JulienMaille right ?

Edit : not fixed for the right side, if you press on the right arrow it will scroll off-screen

[sisi-sh]

In devtools this CSS seems to fix it. Not sure how to apply / persist those changes though, never messed with spicetify before and throwing it into user.css into the theme folder and hitting spicetify apply doesn't really do it.

#main, .Root {
    height: 100% !important;
    width: 100% !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
}

It seems like the background really fucks with the layout. Modifying the overflow property doesn't really do it, nor does it play nice with the lyric viewer. But these rules as they are work and don't shift under any circumstance I've tried so far (been playing with it for just 10 min; not using many extensions or custom apps at all). The !importants are just to enforce it

Edit: my hotfix is to put this at the end of Startup() in default-dynamic.js

const borderfix = document.createElement('style')
borderfix.textContent = `
    #main {
        height: l% !important;
        width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
    }`
document.head.append(borderfix);

[JulienMaille]

Thanks, I'm currently AFK but will test and merge it asap

[LunyaaVRC]

Wondering if someone could show ahow the entirety of the Startup() section looks, i'd like to patch my version but i'm not quite sure where to plug in the fix. i'm not very familiar with code.