fix: apply scrollbar to the dashboard area below the control bars and headerbar [DHIS2-9371]

src/components/App.css

@@ -2,23 +2,16 @@ body {
     background-color: #f4f6f8;
 }
 
-@media print {
-    body {
-        width: 100% !important;
-        padding: 0 !important;
-        margin: 0 !important;
-        background-color: white;
-    }
-
-    .app-shell-app {
-        overflow: visible !important;
-    }
+.app-shell-app {
+    overflow: hidden !important;
 }
 
 .dashboard-wrapper {
     background-color: #f4f6f8;
     padding-left: 10px;
     padding-right: 10px;
+    overflow: auto;
+    padding-bottom: 100px;
 }
 
 /* plugin TODO */
@@ -35,3 +28,16 @@ table.pivot * {
 .secondary-light-bg {
     background-color: #48a999;
 }
+
+@media print {
+    body {
+        width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        background-color: white;
+    }
+
+    .app-shell-app {
+        overflow: visible !important;
+    }
+}

src/components/ControlBar/ControlBar.js

@@ -4,7 +4,7 @@ import { colors } from '@dhis2/ui'
 
 import classes from './styles/ControlBar.module.css'
 
-const DRAG_HANDLE_HEIGHT = 7
+export const DRAG_HANDLE_HEIGHT = 7
 
 class ControlBar extends React.Component {
     constructor(props) {

src/components/ControlBar/EditBar.js

@@ -210,6 +210,7 @@ export class EditBar extends Component {
                         </div>
                     </div>
                 </ControlBar>
+                <div className={classes.topMargin} />
                 {this.translationDialog()}
                 {this.confirmDeleteDialog()}
             </>

src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap

@@ -32,6 +32,9 @@ exports[`EditBar renders the EditBar 1`] = `
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
 
@@ -67,6 +70,9 @@ exports[`EditBar when update access is false renders only the Discard button 1`]
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
 
@@ -132,6 +138,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -226,6 +235,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -320,6 +332,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -421,6 +436,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <ConfirmDeleteDialog
     onContinueEditing={[Function]}
     onDeleteConfirmed={[Function]}
@@ -484,5 +502,8 @@ exports[`EditBar when update access is true when no dashboard id property render
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;

src/components/ControlBar/controlBarDimensions.js

@@ -3,6 +3,7 @@ import { SHOWMORE_BAR_HEIGHT } from './ShowMoreButton'
 export const CONTROL_BAR_ROW_HEIGHT = 40
 export const FIRST_ROW_PADDING_HEIGHT = 10
 export const MIN_ROW_COUNT = 1
+export const HEADERBAR_HEIGHT = 48
 
 const CONTROL_BAR_OUTER_HEIGHT_DIFF =
     FIRST_ROW_PADDING_HEIGHT + SHOWMORE_BAR_HEIGHT - 2 // 2 pixel "adjustment"

src/components/ControlBar/styles/DashboardsBar.module.css

@@ -10,3 +10,7 @@
 .rightControls {
     float: right;
 }
+
+.topMargin {
+    margin-top: 71px;
+}

src/components/Dashboard/DashboardVerticalOffset.js

@@ -7,10 +7,11 @@ import {
     MIN_ROW_COUNT,
 } from '../ControlBar/controlBarDimensions'
 import { sGetControlBarUserRows } from '../../reducers/controlBar'
+import { DRAG_HANDLE_HEIGHT } from '../ControlBar/ControlBar'
 
 const DashboardVerticalOffset = props => {
     const rows = props.editMode ? MIN_ROW_COUNT : props.userRows
-    const marginTop = getControlBarHeight(rows)
+    const marginTop = getControlBarHeight(rows) + DRAG_HANDLE_HEIGHT
 
     return <div className="page-container-top-margin" style={{ marginTop }} />
 }

src/components/Dashboard/EditDashboard.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 
-import DashboardVerticalOffset from './DashboardVerticalOffset'
 import TitleBar from '../TitleBar/TitleBar'
 import ItemGrid from '../ItemGrid/ItemGrid'
 import EditBar from '../ControlBar/EditBar'
@@ -16,6 +15,10 @@ import {
     sGetDashboardItems,
 } from '../../reducers/dashboards'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
 
 export class EditDashboard extends Component {
     state = {
@@ -44,8 +47,11 @@ export class EditDashboard extends Component {
             return <LayoutPrintPreview fromEdit={true} />
         }
 
+        const height =
+            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+
         return (
-            <div className="dashboard-wrapper">
+            <div className="dashboard-wrapper" style={{ height }}>
                 <TitleBar edit={true} />
                 <ItemGrid edit={true} />
             </div>
@@ -56,7 +62,6 @@ export class EditDashboard extends Component {
         return (
             <>
                 <EditBar />
-                <DashboardVerticalOffset editMode={true} />
                 {this.props.updateAccess ? (
                     this.renderGrid()
                 ) : (

src/components/Dashboard/NewDashboard.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import DashboardVerticalOffset from './DashboardVerticalOffset'
 import EditBar from '../ControlBar/EditBar'
 import TitleBar from '../TitleBar/TitleBar'
 import ItemGrid from '../ItemGrid/ItemGrid'
@@ -11,20 +10,27 @@ import LayoutPrintPreview from './PrintLayoutDashboard'
 import { acSetEditNewDashboard } from '../../actions/editDashboard'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
 
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
+
 class NewDashboard extends Component {
     componentDidMount() {
         this.props.setNewDashboard()
     }
 
     render() {
+        const height =
+            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+
         return (
             <>
                 <EditBar />
-                <DashboardVerticalOffset editMode={true} />
                 {this.props.isPrintPreviewView ? (
                     <LayoutPrintPreview fromEdit={true} />
                 ) : (
-                    <div className="dashboard-wrapper">
+                    <div className="dashboard-wrapper" style={{ height }}>
                         <TitleBar edit={true} />
                         <ItemGrid edit={true} />
                     </div>

src/components/Dashboard/PrintActionsBar.js

@@ -8,24 +8,30 @@ import { a4LandscapeWidthPx } from '../../modules/printUtils'
 
 import classes from './styles/PrintActionsBar.module.css'
 
+// 42px set in the module css file
+export const PRINT_ACTIONS_BAR_HEIGHT = 42
+
 const PrintActionsBar = ({ id }) => {
     const width =
         a4LandscapeWidthPx < window.innerWidth
             ? a4LandscapeWidthPx
             : window.innerWidth
 
     return (
-        <div className={classes.container}>
-            <div className={classes.inner} style={{ width }}>
-                <Link className={classes.link} to={`/${id}`}>
-                    <Button>
-                        <LessHorizontalIcon />
-                        {i18n.t('Exit print preview')}
-                    </Button>
-                </Link>
-                <Button onClick={window.print}>{i18n.t('Print')}</Button>
+        <>
+            <div className={classes.container}>
+                <div className={classes.inner} style={{ width }}>
+                    <Link className={classes.link} to={`/${id}`}>
+                        <Button>
+                            <LessHorizontalIcon />
+                            {i18n.t('Exit print preview')}
+                        </Button>
+                    </Link>
+                    <Button onClick={window.print}>{i18n.t('Print')}</Button>
+                </div>
             </div>
-        </div>
+            <div className={classes.topMargin} />
+        </>
     )
 }
 

src/components/Dashboard/PrintDashboard.js

@@ -18,6 +18,7 @@ import {
 } from '../../reducers/dashboards'
 import { PAGEBREAK, PRINT_TITLE_PAGE, SPACER } from '../../modules/itemTypes'
 import { a4LandscapeWidthPx } from '../../modules/printUtils'
+import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar'
 
 import classes from './styles/PrintDashboard.module.css'
 
@@ -76,10 +77,12 @@ export class PrintDashboard extends Component {
     }
 
     render() {
+        const height = window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT
+
         return (
             <>
                 <PrintActionsBar id={this.props.dashboard.id} />
-                <div className={classes.wrapper}>
+                <div className={classes.wrapper} style={{ height }}>
                     <PrintInfo isLayout={false} />
                     <div
                         className={classes.pageOuter}