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

package.json

@@ -256,7 +256,7 @@
     "@typescript-eslint/parser": "^5.47.1",
     "@vitejs/plugin-react-swc": "^3.2.0",
     "cross-env": "^7.0.3",
-    "electron": "castlabs/electron-releases#24.4.1+wvcus",
+    "electron": "castlabs/electron-releases#27.0.0+wvcus",
     "electron-builder": "^23.6.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-playwright-helpers": "^1.5.5",

src/backend/main.ts

@@ -491,7 +491,7 @@ ipcMain.on('unlock', () => {
     unlinkSync(join(gamesConfigPath, 'lock'))
     if (powerId) {
       logInfo('Stopping Power Saver Blocker', LogPrefix.Backend)
-      return powerSaveBlocker.stop(powerId)
+      powerSaveBlocker.stop(powerId)
     }
   }
 })

src/frontend/App.css

@@ -20,30 +20,30 @@ body,
 html,
 #root,
 .App {
-  height: 100%;
-  overflow: hidden;
+  min-height: 100vh;
 }
 
 .App {
   text-align: center;
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-template-areas: 'offline offline' 'sidebar content' 'controller controller';
+  grid-template-areas: 'offline offline' 'sidebar content' 'sidebar controller';
   grid-template-rows: min-content 1fr min-content;
 }
 
 .App .Sidebar {
   grid-area: sidebar;
+  max-height: 100vh;
+  position: sticky;
+  top: 0px;
 }
 
 .App .content {
   display: flex;
   grid-area: content;
   flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: var(--gradient-body-background);
+  min-height: 100%;
+  background: var(--gradient-body-background, var(--body-background));
 }
 
 .App .content .UpdateComponent--topLevel {
@@ -53,7 +53,10 @@ html,
 
 .App .controller {
   grid-area: controller;
-  position: relative;
+  position: sticky;
+  bottom: 0px;
+  background: var(--background);
+  z-index: 10;
 }
 
 .App .offline-message {

src/frontend/components/UI/Header/index.css

@@ -8,7 +8,7 @@
   grid-gap: 8px;
   align-items: start;
   padding: var(--space-md);
-  background: var(--gradient-body-background);
+  background: var(--gradient-body-background, var(--body-background));
   color: var(--text-secondary);
 }
 

src/frontend/screens/Library/index.css

@@ -40,13 +40,12 @@
 
 .libraryHeader {
   text-align: start;
-  padding: 0 var(--space-md-fixed);
-  margin: var(--space-sm) 0;
-  background: var(--body-background);
+  padding: var(--space-md-fixed);
+  margin: 0;
+  background: var(--gradient-body-background, var(--body-background));
   position: sticky;
-  top: 0px;
+  top: var(--header-height, 82px);
   z-index: 9;
-  height: 46px;
 }
 
 .libraryHeaderWrapper {
@@ -87,8 +86,3 @@
 #backToTopBtn:hover {
   opacity: 1;
 }
-
-.listing {
-  overflow-y: auto;
-  flex: 100% 1 1;
-}

src/frontend/screens/Library/index.tsx

@@ -81,41 +81,33 @@ export default React.memo(function Library(): JSX.Element {
   )
   const { t } = useTranslation()
   const backToTopElement = useRef(null)
-  const listing = useRef<HTMLDivElement>(null)
 
   //Remember scroll position
   useLayoutEffect(() => {
     const scrollPosition = parseInt(storage?.getItem('scrollPosition') || '0')
 
     const storeScrollPosition = () => {
-      storage?.setItem(
-        'scrollPosition',
-        listing.current?.scrollTop.toString() || '0'
-      )
+      storage?.setItem('scrollPosition', window.scrollY.toString() || '0')
     }
 
-    listing.current?.addEventListener('scroll', storeScrollPosition)
-    listing.current?.scrollTo(0, scrollPosition || 0)
+    window.addEventListener('scroll', storeScrollPosition)
+    window.scrollTo(0, scrollPosition || 0)
 
     return () => {
-      listing.current?.removeEventListener('scroll', storeScrollPosition)
+      window.removeEventListener('scroll', storeScrollPosition)
     }
-  }, [listing.current])
+  }, [])
 
   // bind back to top button
   useEffect(() => {
     if (backToTopElement.current) {
-      const listing = document.querySelector('.listing')
-      if (listing) {
-        listing.addEventListener('scroll', () => {
-          const btn = document.getElementById('backToTopBtn')
-          const topSpan = document.getElementById('top')
-          if (btn && topSpan) {
-            btn.style.visibility =
-              listing.scrollTop > 450 ? 'visible' : 'hidden'
-          }
-        })
-      }
+      window.addEventListener('scroll', () => {
+        const btn = document.getElementById('backToTopBtn')
+        const topSpan = document.getElementById('top')
+        if (btn && topSpan) {
+          btn.style.visibility = window.scrollY > 450 ? 'visible' : 'hidden'
+        }
+      })
     }
   }, [backToTopElement])
 
@@ -336,6 +328,16 @@ export default React.memo(function Library(): JSX.Element {
     showNonAvailable
   ])
 
+  // we need this to do proper `position: sticky` of the Add Game area
+  // the height of the Header can change at runtime with different font families
+  useEffect(() => {
+    const header = document.querySelector('.Header')
+    if (header) {
+      const headerHeight = header.getBoundingClientRect().height
+      document.body.style.setProperty('--header-height', `${headerHeight}px`)
+    }
+  }, [])
+
   if (!epic && !gog && !amazon) {
     return (
       <ErrorComponent
@@ -351,7 +353,7 @@ export default React.memo(function Library(): JSX.Element {
     <>
       <Header />
 
-      <div className="listing" ref={listing}>
+      <div className="listing">
         <span id="top" />
         {showRecentGames && (
           <RecentlyPlayed

yarn.lock

@@ -3517,9 +3517,9 @@ electron-updater@^5.0.1:
     semver "^7.3.5"
     typed-emitter "^2.1.0"
 
-electron@castlabs/electron-releases#24.4.1+wvcus:
-  version "24.4.1"
-  resolved "https://codeload.github.com/castlabs/electron-releases/tar.gz/382f71fa5495e1523d6677fa96b3d3c583d79e3a"
+electron@castlabs/electron-releases#27.0.0+wvcus:
+  version "27.0.0"
+  resolved "https://codeload.github.com/castlabs/electron-releases/tar.gz/6963e958f91aa07eca5409e0ab49446c5cd01247"
   dependencies:
     "@electron/get" "^2.0.0"
     "@types/node" "^18.11.18"