From 0ee5f1861a4d1a1364a7dc3f3f2d73d4dadcaf35 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 25 Mar 2020 08:54:33 -0700
Subject: [PATCH 1/2] fix: use measured height in view mode [DHIS2-8492]

---
 src/components/Item/VisualizationItem/Item.js | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index d94043a90..b1dabdb5b 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -169,13 +169,18 @@ export class Item extends Component {
             );
         }
 
+        const calculatedHeight =
+            this.props.item.originalHeight -
+            this.headerRef.current.clientHeight -
+            HEADER_MARGIN_HEIGHT;
+
         const props = {
             ...this.props,
             visualization,
             style: this.memoizedGetContentStyle(
-                this.props.item.originalHeight,
-                this.headerRef.current.clientHeight,
-                this.contentRef ? this.contentRef.offsetHeight : null
+                calculatedHeight,
+                this.contentRef ? this.contentRef.offsetHeight : null,
+                this.props.editMode
             ),
         };
 
@@ -280,13 +285,12 @@ export class Item extends Component {
             this.props.visualization
         );
 
-    getContentStyle = (originalHeight, headerHeight, measuredHeight) => {
-        const calculatedHeight =
-            originalHeight - headerHeight - HEADER_MARGIN_HEIGHT;
+    getContentStyle = (calculatedHeight, measuredHeight, editMode) => {
+        const height = editMode
+            ? measuredHeight || calculatedHeight
+            : calculatedHeight;
 
-        return {
-            height: measuredHeight || calculatedHeight,
-        };
+        return { height };
     };
 
     render() {

From 78d68fe65ba671a6f1bcf035d239c8f079fb1828 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 25 Mar 2020 15:13:52 -0700
Subject: [PATCH 2/2] fix: adjust height to account for padding-bottom

---
 src/components/Item/VisualizationItem/Item.js | 4 +++-
 src/components/ItemGrid/ItemGrid.js           | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index b1dabdb5b..2ce84fa6d 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -29,6 +29,7 @@ import memoizeOne from '../../../modules/memoizeOne';
 import { colors } from '@dhis2/ui-core';
 import { getVisualizationConfig } from './plugin';
 import LoadingMask from './LoadingMask';
+import { ITEM_CONTENT_PADDING_BOTTOM } from '../../ItemGrid/ItemGrid';
 
 const styles = {
     icon: {
@@ -172,7 +173,8 @@ export class Item extends Component {
         const calculatedHeight =
             this.props.item.originalHeight -
             this.headerRef.current.clientHeight -
-            HEADER_MARGIN_HEIGHT;
+            HEADER_MARGIN_HEIGHT -
+            ITEM_CONTENT_PADDING_BOTTOM;
 
         const props = {
             ...this.props,
diff --git a/src/components/ItemGrid/ItemGrid.js b/src/components/ItemGrid/ItemGrid.js
index df9eb7a7a..0f1fd56e3 100644
--- a/src/components/ItemGrid/ItemGrid.js
+++ b/src/components/ItemGrid/ItemGrid.js
@@ -44,6 +44,8 @@ import ProgressiveLoadingContainer from '../Item/ProgressiveLoadingContainer';
 // Component
 
 const EXPANDED_HEIGHT = 17;
+// this is set in the .dashboard-item-content css
+export const ITEM_CONTENT_PADDING_BOTTOM = 4;
 
 export class ItemGrid extends Component {
     state = {