From 1bc573e6b1ed912a68abcbc77fe82400f8f99ef3 Mon Sep 17 00:00:00 2001
From: Cheng Shi <cks5520psu@gmail.com>
Date: Tue, 8 Oct 2024 18:29:00 -0400
Subject: [PATCH] fix: adjust min-height of css as a dynamic variable

---
 src/sections/error-page/ErrorPage.module.scss | 2 +-
 src/sections/error-page/ErrorPage.tsx         | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/sections/error-page/ErrorPage.module.scss b/src/sections/error-page/ErrorPage.module.scss
index 842762fde..127aaa88b 100644
--- 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
index ee70407b7..4967e5b7a 100644
--- 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']}>