From 5c852aa2ae3d62819b903095f19e3af7563313e1 Mon Sep 17 00:00:00 2001
From: Ariel Juodziukynas <arieljuod@gmail.com>
Date: Sat, 28 Oct 2023 17:10:21 -0300
Subject: [PATCH] [UI] Electron 27 fixes (#3166)

---
 src/frontend/index.scss                | 12 +++++++++
 src/frontend/screens/Library/index.tsx | 34 +++++++++++++++++++++++---
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/frontend/index.scss b/src/frontend/index.scss
index b3cb137bad..395589085b 100644
--- a/src/frontend/index.scss
+++ b/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*/
diff --git a/src/frontend/screens/Library/index.tsx b/src/frontend/screens/Library/index.tsx
index 1d05b9b573..10fa571bf6 100644
--- a/src/frontend/screens/Library/index.tsx
+++ b/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)
     }
   }, [])