[UI] Electron 27 fixes (Heroic-Games-Launcher#3166)

src/frontend/index.scss

@@ -21,10 +21,22 @@
 //   }
 // }
 
+// this fixes a problem with an extra horizontal scrollbar when
+// a vertical scrollbar is displayed, don't change
+html {
+  width: 100vw;
+  overflow-x: hidden;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   user-select: none;
+  // these 2 !important fix a problem when displaying the
+  // context menu in the library, material ui sets values
+  // that create problems, don't change
+  overflow: visible !important;
+  padding: 0 !important;
 }
 
 /* Overlay Scrollbar*/

src/frontend/screens/Library/index.tsx

@@ -381,11 +381,37 @@ export default React.memo(function Library(): JSX.Element {
 
   // 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
+  // and when resizing the window
   useEffect(() => {
-    const header = document.querySelector('.Header')
-    if (header) {
-      const headerHeight = header.getBoundingClientRect().height
-      document.body.style.setProperty('--header-height', `${headerHeight}px`)
+    let timer: NodeJS.Timeout | null = null
+
+    const setHeaderHightCSS = () => {
+      if (timer) clearTimeout(timer)
+
+      // adding a timeout so we don't run this for every resize event
+      timer = setTimeout(() => {
+        console.log('fired')
+        const header = document.querySelector('.Header')
+        if (header) {
+          const headerHeight = header.getBoundingClientRect().height
+          const libraryHeader = document.querySelector(
+            '.libraryHeader'
+          ) as HTMLDivElement
+          libraryHeader &&
+            libraryHeader.style.setProperty(
+              '--header-height',
+              `${headerHeight}px`
+            )
+        }
+      }, 50)
+    }
+    // set when mounted
+    setHeaderHightCSS()
+    // also listen the resize event
+    window.addEventListener('resize', setHeaderHightCSS)
+
+    return () => {
+      window.removeEventListener('resize', setHeaderHightCSS)
     }
   }, [])