From b0857354e57fefca99ae6d0299736472ec97a4d8 Mon Sep 17 00:00:00 2001
From: Cheng Shi <cks5520psu@gmail.com>
Date: Wed, 9 Oct 2024 21:12:08 -0400
Subject: [PATCH] fix: adjust min-height of css as a dynamic variable

---
 src/router/routes.tsx                         |  2 +-
 src/sections/error-page/ErrorPage.module.scss |  7 +++++--
 src/sections/error-page/ErrorPage.tsx         | 19 +++++++++++--------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/router/routes.tsx b/src/router/routes.tsx
index 79fefd038..2ee151ab7 100644
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@@ -17,7 +17,7 @@ export const routes: RouteObject[] = [
   {
     path: '/',
     element: <Layout />,
-    errorElement: <ErrorPage />,
+    errorElement: <ErrorPage fullViewport />,
     children: [
       {
         path: Route.HOME,
diff --git a/src/sections/error-page/ErrorPage.module.scss b/src/sections/error-page/ErrorPage.module.scss
index 127aaa88b..3fae83ab5 100644
--- a/src/sections/error-page/ErrorPage.module.scss
+++ b/src/sections/error-page/ErrorPage.module.scss
@@ -7,10 +7,13 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: var(--error-min-height);
+  min-height: $main-container-available-height;
+  &.full-viewport {
+    min-height: 100vh;
+  }
 }
 
-.middle-search-cta-wrapper {
+.middle-errorMessage-wrapper {
   display: flex;
   flex-direction: column;
   gap: 2rem;
diff --git a/src/sections/error-page/ErrorPage.tsx b/src/sections/error-page/ErrorPage.tsx
index 4967e5b7a..a28eaafea 100644
--- a/src/sections/error-page/ErrorPage.tsx
+++ b/src/sections/error-page/ErrorPage.tsx
@@ -4,21 +4,24 @@ import styles from './ErrorPage.module.scss'
 import { useErrorLogger } from './useErrorLogger'
 import { ExclamationCircle } from 'react-bootstrap-icons'
 import { useTheme } from '@iqss/dataverse-design-system'
+import cn from 'classnames'
 
-export function ErrorPage() {
+interface AppLoaderProps {
+  fullViewport?: boolean
+}
+
+export function ErrorPage({ fullViewport = false }: AppLoaderProps) {
   const { t } = useTranslation('errorPage')
   const error = useRouteError()
   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']}>
+    <section
+      className={cn(styles['section-wrapper'], {
+        [styles['full-viewport']]: fullViewport
+      })}>
+      <div className={styles['middle-errorMessage-wrapper']}>
         <div className={styles['icon-layout']}>
           <ExclamationCircle color={theme.color.dangerColor} size={62} />
           <div aria-label="error-page">