fix: user rows adjustments

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-05-10T12:25:45.620Z\n"
-"PO-Revision-Date: 2023-05-10T12:25:45.620Z\n"
+"POT-Creation-Date: 2024-12-04T17:00:46.379Z\n"
+"PO-Revision-Date: 2024-12-04T17:00:46.380Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -478,12 +478,6 @@ msgstr "Yes, remove filters"
 msgid "The dashboard couldn't be made available offline. Try again."
 msgstr "The dashboard couldn't be made available offline. Try again."
 
-msgid "Failed to unstar the dashboard"
-msgstr "Failed to unstar the dashboard"
-
-msgid "Failed to star the dashboard"
-msgstr "Failed to star the dashboard"
-
 msgid "Remove from offline storage"
 msgstr "Remove from offline storage"
 
@@ -548,6 +542,12 @@ msgstr "Cannot unstar this dashboard while offline"
 msgid "Cannot star this dashboard while offline"
 msgstr "Cannot star this dashboard while offline"
 
+msgid "Failed to unstar the dashboard"
+msgstr "Failed to unstar the dashboard"
+
+msgid "Failed to star the dashboard"
+msgstr "Failed to star the dashboard"
+
 msgid "Loading dashboard – {{name}}"
 msgstr "Loading dashboard – {{name}}"
 

src/components/DashboardsBar/__tests__/getRowsFromHeight.spec.js

@@ -0,0 +1,22 @@
+import { getRowsFromHeight } from '../getRowsFromHeight.js'
+
+test('getRowsFromHeight returns an integer', () => {
+    const res = getRowsFromHeight(100)
+    expect(Number.isInteger(res)).toBeTruthy()
+})
+
+const testCases = [
+    { height: 0, rows: 0 },
+    { height: 36, rows: 1 },
+    { height: 100, rows: 3 },
+    { height: 200, rows: 5 },
+    { height: 300, rows: 8 },
+    { height: 400, rows: 10 },
+    { height: 500, rows: 13 },
+]
+
+testCases.forEach(({ height, rows }) => {
+    test(`getRowsFromHeight returns ${rows} for height ${height}`, () => {
+        expect(getRowsFromHeight(height)).toBe(rows)
+    })
+})

src/components/DashboardsBar/getRowsFromHeight.js

@@ -1,9 +1,15 @@
-const ROW_HEIGHT = 32
-const PADDING_TOP = 6
-const SHOWMORE_BUTTON_HEIGHT = 0 // No longer shown under the chip area
+/* ROW_HEIGHT is the height of a chip + the gap between chips.
+ But this isn't correct for the first or last row in the dashboards bar
+    because the gap is only applied between rows, not at the top or bottom.
+    So the first and last row are actually 3px shorter than the other rows, i.e. 35px
+    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 ROW_HEIGHT = 38 // 32px chip + 6px gap
+const PADDING_TOP = 3
 
 export const getRowsFromHeight = (height) => {
-    return Math.round(
-        (height - SHOWMORE_BUTTON_HEIGHT - PADDING_TOP) / ROW_HEIGHT
-    )
+    return Math.abs(Math.round(
+        (height - PADDING_TOP) / ROW_HEIGHT
+    ))
 }

src/components/styles/App.css

@@ -1,8 +1,8 @@
 :root {
     /* control bar variables */
     --user-rows-count: 1;
-    --controlbar-padding: 8px;
-    --row-height: 36px;
+    --controlbar-padding: 3px;
+    --row-height: 38px;
     --min-rows-height: calc(
         var(--controlbar-padding) + (1 * var(--row-height))
     );