From d7d730f0e1855286d0aa0a7db51e3643a42c2ed8 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Tue, 9 Mar 2021 12:56:39 +0100
Subject: [PATCH] fix: use window height to determine controlbar height (#1620)

This will hopefully fix the issue where the expanded control bar on the phone is too tall. Using window height should take into account the phone's available screen space considering address bar and navigation controls on some phone models.
---
 src/components/App.css                                 |  3 +++
 src/components/App.js                                  | 10 ++++++++++
 .../ControlBar/ViewControlBar/DashboardsBar.js         |  7 +++++++
 .../ViewControlBar/styles/DashboardsBar.module.css     |  2 +-
 src/components/__tests__/App.spec.js                   |  1 +
 .../__tests__/__snapshots__/App.spec.js.snap           |  3 +++
 6 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/App.css b/src/components/App.css
index aad812282..324465953 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -12,6 +12,9 @@
     --user-rows-height: calc(
         var(--controlbar-padding) + (var(--user-rows-count) * var(--row-height))
     );
+    --sm-expanded-controlbar-height: calc(
+        (var(--vh, 1vh) * 100) - var(--headerbar-height) - 32px
+    );
 
     /* item variables */
     --item-header-margin-top: 8px;
diff --git a/src/components/App.js b/src/components/App.js
index 9e092852b..782af3d68 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -38,6 +38,16 @@ const App = props => {
         props.fetchDashboards()
         props.setControlBarRows()
         props.setShowDescription()
+
+        // store the headerbar height for controlbar height calculations
+        const headerbarHeight = document
+            .querySelector('header')
+            .getBoundingClientRect().height
+
+        document.documentElement.style.setProperty(
+            '--headerbar-height',
+            `${headerbarHeight}px`
+        )
     }, [])
 
     useEffect(() => {
diff --git a/src/components/ControlBar/ViewControlBar/DashboardsBar.js b/src/components/ControlBar/ViewControlBar/DashboardsBar.js
index a4b119c51..590abb6dd 100644
--- a/src/components/ControlBar/ViewControlBar/DashboardsBar.js
+++ b/src/components/ControlBar/ViewControlBar/DashboardsBar.js
@@ -10,6 +10,7 @@ import { getRowsFromHeight } from './controlBarDimensions'
 import { sGetControlBarUserRows } from '../../../reducers/controlBar'
 import { acSetControlBarUserRows } from '../../../actions/controlBar'
 import { apiPostControlBarRows } from '../../../api/controlBar'
+import { useWindowDimensions } from '../../WindowDimensionsProvider'
 
 import classes from './styles/DashboardsBar.module.css'
 
@@ -25,6 +26,7 @@ const DashboardsBar = ({
     const [dragging, setDragging] = useState(false)
     const userRowsChanged = useRef(false)
     const ref = createRef()
+    const { height } = useWindowDimensions()
 
     const rootElement = document.documentElement
 
@@ -44,6 +46,11 @@ const DashboardsBar = ({
         rootElement.style.setProperty('--user-rows-count', userRows)
     }, [userRows])
 
+    useEffect(() => {
+        const vh = height * 0.01
+        rootElement.style.setProperty('--vh', `${vh}px`)
+    }, [height])
+
     useEffect(() => {
         if (!dragging && userRowsChanged.current) {
             apiPostControlBarRows(userRows)
diff --git a/src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css
index 847ee7446..db07a8c9c 100644
--- a/src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css
+++ b/src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css
@@ -75,7 +75,7 @@
         position: absolute;
         display: flex;
         flex-direction: column;
-        height: calc(100% - 32px);
+        height: var(--sm-expanded-controlbar-height);
     }
 
     .expanded .content {
diff --git a/src/components/__tests__/App.spec.js b/src/components/__tests__/App.spec.js
index 8ac974412..465d1805a 100644
--- a/src/components/__tests__/App.spec.js
+++ b/src/components/__tests__/App.spec.js
@@ -46,6 +46,7 @@ test('renders the app', () => {
     }
     const { container } = render(
         <Provider store={mockStore(store)}>
+            <header style={{ height: '48px' }} />
             <App />
         </Provider>
     )
diff --git a/src/components/__tests__/__snapshots__/App.spec.js.snap b/src/components/__tests__/__snapshots__/App.spec.js.snap
index ed7f22402..ff083a317 100644
--- a/src/components/__tests__/__snapshots__/App.spec.js.snap
+++ b/src/components/__tests__/__snapshots__/App.spec.js.snap
@@ -2,6 +2,9 @@
 
 exports[`renders the app 1`] = `
 <div>
+  <header
+    style="height: 48px;"
+  />
   <div
     class="dashboard"
   />