From ca8bcc0b1509a1ab6f190cadc697c9ec7e6bdbc4 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Mon, 9 Dec 2024 13:41:19 +0100
Subject: [PATCH] fix: correct calculation of number of rows with new chip
 dimensions

---
 .../__tests__/getRowsFromHeight.spec.js             |  2 +-
 src/components/DashboardsBar/getRowsFromHeight.js   | 10 +++++++---
 src/components/styles/App.css                       | 13 +++++++------
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js b/src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js
index 10a8622e9..1b8f5b6f7 100644
--- a/src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js
+++ b/src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js
@@ -6,7 +6,7 @@ test('getRowsFromHeight returns an integer', () => {
 })
 
 const testCases = [
-    { height: 0, rows: 0 },
+    { height: 0, rows: 1 },
     { height: 36, rows: 1 },
     { height: 100, rows: 3 },
     { height: 200, rows: 5 },
diff --git a/src/components/DashboardsBar/getRowsFromHeight.js b/src/components/DashboardsBar/getRowsFromHeight.js
index d8aea8f3b..46a55681e 100644
--- a/src/components/DashboardsBar/getRowsFromHeight.js
+++ b/src/components/DashboardsBar/getRowsFromHeight.js
@@ -5,11 +5,15 @@
     But in order to keep the calculation simple, we'll just use 38px for all rows, while
     subtracting 3px from PADDING_TOP (which is actually 6px)
 */
+const FIRST_ROW_HEIGHT = 35 // 32px chip + 3px gap (only 1/2 of the gap for first row)
 const ROW_HEIGHT = 38 // 32px chip + 6px gap
-const PADDING_TOP = 3
+const PADDING_TOP = 6
 
 export const getRowsFromHeight = (height) => {
-    return Math.abs(Math.round(
-        (height - PADDING_TOP) / ROW_HEIGHT
+    if (height <= PADDING_TOP + FIRST_ROW_HEIGHT) {
+        return 1
+    }
+    return 1 + Math.abs(Math.round(
+        (height - PADDING_TOP - FIRST_ROW_HEIGHT) / ROW_HEIGHT
     ))
 }
diff --git a/src/components/styles/App.css b/src/components/styles/App.css
index 76e9bd8a5..e82d87c27 100644
--- a/src/components/styles/App.css
+++ b/src/components/styles/App.css
@@ -1,16 +1,17 @@
 :root {
-    /* control bar variables */
+    /* dashboards bar variables */
     --user-rows-count: 1;
-    --controlbar-padding: 3px;
-    --row-height: 38px;
+    --dashboardsbar-padding: 6px;
+    --first-row-height: 35px; /* 32px chip height + 6px/2 gap (bottom of chip only) */
+    --row-height: 38px;  /* 32px chip height + 6px gap */
     --min-rows-height: calc(
-        var(--controlbar-padding) + (1 * var(--row-height))
+        var(--dashboardsbar-padding) + (1 * var(--first-row-height))
     );
     --max-rows-height: calc(
-        var(--controlbar-padding) + (10 * var(--row-height))
+        var(--dashboardsbar-padding) + (1 * var(--first-row-height)) + (9 * var(--row-height))
     );
     --user-rows-height: calc(
-        var(--controlbar-padding) + (var(--user-rows-count) * var(--row-height))
+        var(--dashboardsbar-padding) + (1 * var(--first-row-height)) + ((var(--user-rows-count) - 1) * var(--row-height))
     );
     --sm-expanded-controlbar-height: calc(
         (var(--vh, 1vh) * 100) - var(--headerbar-height) - 32px