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

@@ -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;

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(() => {

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)

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 {

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>
     )

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"
   />