fix: adjust min-height of css as a dynamic variable

IQSS · Oct 8, 2024 · 1bc573e · 1bc573e
1 parent 6d39627
commit 1bc573e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/sections/error-page/ErrorPage.module.scss b/src/sections/error-page/ErrorPage.module.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: $main-container-available-height;
+  min-height: var(--error-min-height);
 }
 
 .middle-search-cta-wrapper {

diff --git a/src/sections/error-page/ErrorPage.tsx b/src/sections/error-page/ErrorPage.tsx
@@ -11,6 +11,11 @@ export function ErrorPage() {
   useErrorLogger(error)
   const theme = useTheme()
 
+  const header = document.querySelector('nav')
+  const footer = document.querySelector('footer')
+  const newMinHeight = header && footer ? '$main-container-available-height' : '100vh'
+  document.documentElement.style.setProperty('--error-min-height', newMinHeight)
+
   return (
     <section className={styles['section-wrapper']}>
       <div className={styles['middle-search-cta-wrapper']}>