[Tech] Update to Electron 27. Re-work scroll-related CSS

[arielj]

This PR replaces #3053

Electron 27 should fix the issues present in Electron 26 that prevented that PR from being merged.

Something changed in that version that broke the spatial navigation, the browser wouldn't enter inside an element with a scrollbar UNLESS it's the body element. Because of that, I had to re-implement how the scroll is handled: now, instead of scrolling the main element, we scroll the window/body.

The behavior is almost the same, but because of that change you'll notice small details:

• before, the scrollbar was contained inside the content (it started below the fixed header at the top), now it starts at the top of the window
• before, the controller hints widget covered 100% of the width of the screen, now it starts at the end of the sidebar and ends at the scrollbar, so it's a bit of empty space at the right

I think everything is the same apart from that.

---

Use the following Checklist if you have changed something on the Backend or Frontend:

• Tested the feature and it's working on a current and clean install.
• Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
• Created / Updated Tests (If necessary)
• Created / Updated documentation (If necessary)

[arielj]

needed because of the electron upgrade

[arielj]

we get the scroll from the window now, not from the listing element

[Etaash-mathamsetty]

looks like everything is working other than this issue (look at the search bar)

[arielj]

I see, looks like a theme issue, I'll check the other themes too

[Etaash-mathamsetty]

for some reason the app image shrunk by 100 mb with this change, but I guess that's a good thing right?

[flavioislima]

for some reason the app image shrunk by 100 mb with this change, but I guess that's a good thing right?

Some Electron optimization maybe?

@arielj can you also update electron-builder?

[flavioislima]

Thinking about priorities, I agree that spacial navigation is the most important to have it fixed.
But I think we should get back to the scroll the way it was since it looked more 'native' than now when possible. Maybe it is just an electron/chromium but, I am not sure.

other than that the code looks good. But if possible upgrade electron-builder as well. Let's always update both whenever we can since it introduces new features and bug fixes as well.

[arielj]

Thinking about priorities, I agree that spacial navigation is the most important to have it fixed. But I think we should get back to the scroll the way it was since it looked more 'native' than now when possible. Maybe it is just an electron/chromium but, I am not sure.

other than that the code looks good. But if possible upgrade electron-builder as well. Let's always update both whenever we can since it introduces new features and bug fixes as well.

spatial navigation seems to be broken in newer chromium versions, I tested that outside Heroic using the spatial navigation flag and I have the same problem

I don't know how long it would take for them to fix that, that's why I went and changed the scroll to be on the body and not in the nested element

but I agree the previous scroll looks better, I guess we'll have to keep an eye on chrome release notes