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

IQSS · Oct 10, 2024 · b085735 · b085735
1 parent 1bc573e
commit b085735
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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">