CHANGELOG.md

@@ -1,3 +1,10 @@
+## [101.2.3](https://github.com/dhis2/maps-app/compare/v101.2.2...v101.2.3) (2025-03-19)
+
+
+### Bug Fixes
+
+* remove hardcoded HEADER_HEIGHT [DHIS2-19231] ([#3495](https://github.com/dhis2/maps-app/issues/3495)) ([ca1744e](https://github.com/dhis2/maps-app/commit/ca1744eaebfe37b37a8402f4b7f33bc4a44fd6ba))
+
 ## [101.2.2](https://github.com/dhis2/maps-app/compare/v101.2.1...v101.2.2) (2025-03-18)
 
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "maps-app",
-    "version": "101.2.2",
+    "version": "101.2.3",
     "description": "DHIS2 Maps",
     "license": "BSD-3-Clause",
     "author": "Bjørn Sandvik",

src/components/app/App.js

@@ -1,5 +1,5 @@
 import cx from 'classnames'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import BottomPanel from '../datatable/BottomPanel.js'
 import DownloadModeMenu from '../download/DownloadMenubar.js'
@@ -16,6 +16,18 @@ import { useLoadDataStore } from './useLoadDataStore.js'
 import { useLoadMap } from './useLoadMap.js'
 
 const App = () => {
+    useEffect(() => {
+        // Store the header height for height calculations
+        const headerHeight = document
+            .querySelector('header')
+            .getBoundingClientRect().height
+
+        document.documentElement.style.setProperty(
+            '--header-height',
+            `${headerHeight}px`
+        )
+    }, [])
+
     useLoadMap()
     useLoadDataStore()
 

src/components/datatable/BottomPanel.js

@@ -3,12 +3,12 @@ import React, { useRef, useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { closeDataTable, resizeDataTable } from '../../actions/dataTable.js'
 import {
-    HEADER_HEIGHT,
     APP_MENU_HEIGHT,
     LAYERS_PANEL_WIDTH,
     RIGHT_PANEL_WIDTH,
 } from '../../constants/layout.js'
 import useKeyDown from '../../hooks/useKeyDown.js'
+import { getHeaderHeight } from '../../util/helpers.js'
 import { useWindowDimensions } from '../WindowDimensionsProvider.js'
 import DataTable from './DataTable.js'
 import ErrorBoundary from './ErrorBoundary.js'
@@ -30,7 +30,8 @@ const BottomPanel = () => {
         [panelRef]
     )
 
-    const maxHeight = height - HEADER_HEIGHT - APP_MENU_HEIGHT
+    const headerHeight = getHeaderHeight()
+    const maxHeight = height - headerHeight - APP_MENU_HEIGHT
     const tableHeight =
         dataTableHeight < maxHeight ? dataTableHeight : maxHeight
     const layersWidth = layersPanelOpen ? LAYERS_PANEL_WIDTH : 0

src/components/map/MapPosition.js

@@ -1,8 +1,8 @@
 import cx from 'classnames'
 import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { APP_MENU_HEIGHT, HEADER_HEIGHT } from '../../constants/layout.js'
-import { getSplitViewLayer } from '../../util/helpers.js'
+import { APP_MENU_HEIGHT } from '../../constants/layout.js'
+import { getSplitViewLayer, getHeaderHeight } from '../../util/helpers.js'
 import DownloadMapInfo from '../download/DownloadMapInfo.js'
 import NorthArrow from '../download/NorthArrow.js'
 import MapContainer from '../map/MapContainer.js'
@@ -24,12 +24,13 @@ const MapPosition = () => {
         useSelector((state) => state.ui)
     const dataTableOpen = useSelector((state) => !!state.dataTable)
 
-    let mapHeight = `calc(100vh - ${HEADER_HEIGHT}px)`
+    const headerHeight = getHeaderHeight()
+    let mapHeight = `calc(100vh - ${headerHeight}px)`
     if (!downloadMode) {
         if (dataTableOpen) {
-            mapHeight = `calc(100vh - ${HEADER_HEIGHT}px - ${APP_MENU_HEIGHT}px - ${dataTableHeight}px)`
+            mapHeight = `calc(100vh - ${headerHeight}px - ${APP_MENU_HEIGHT}px - ${dataTableHeight}px)`
         } else {
-            mapHeight = `calc(100vh - ${HEADER_HEIGHT}px - ${APP_MENU_HEIGHT}px)`
+            mapHeight = `calc(100vh - ${headerHeight}px - ${APP_MENU_HEIGHT}px)`
         }
     }
 

src/constants/layout.js

@@ -1,4 +1,3 @@
-export const HEADER_HEIGHT = 48
 export const APP_MENU_HEIGHT = 32
 export const LAYERS_PANEL_WIDTH = 300
 export const RIGHT_PANEL_WIDTH = 380

src/util/helpers.js

@@ -143,3 +143,11 @@ export const sumObjectValues = (obj) =>
         }
         return sum
     }, 0)
+
+// Get the header height for height calculations
+export const getHeaderHeight = () =>
+    Number(
+        getComputedStyle(document.documentElement)
+            .getPropertyValue('--header-height')
+            .replace('px', '')
+    )