fix: correct calculation of number of rows with new chip dimensions

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 },

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

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