From 48948ef48cbdafc1a6da7da19b3b3e1838176623 Mon Sep 17 00:00:00 2001
From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com>
Date: Fri, 16 May 2025 14:20:43 +0100
Subject: [PATCH] RowItemRenderer: Fix row jumping when entering edit mode
 (#105453)

fix row jumping when entering edit mode
---
 .../edit-pane/DashboardEditPaneSplitter.tsx   |  7 +++---
 .../scene/layout-rows/RowItemRenderer.tsx     | 23 ++++---------------
 2 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
index 0066d82c52e..079bad18cb2 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
@@ -158,10 +158,11 @@ function getStyles(theme: GrafanaTheme2, headerHeight: number) {
       label: 'body',
       display: 'flex',
       flexGrow: 1,
-      gap: '8px',
+      gap: theme.spacing(1),
       boxSizing: 'border-box',
       flexDirection: 'column',
-      padding: theme.spacing(0, 2, 2, 2),
+      // without top padding the fixed controls headers is rendered over the selection outline.
+      padding: theme.spacing(0.125, 2, 2, 2),
     }),
     bodyEditing: css({
       position: 'absolute',
@@ -171,8 +172,6 @@ function getStyles(theme: GrafanaTheme2, headerHeight: number) {
       bottom: 0,
       overflow: 'auto',
       scrollbarWidth: 'thin',
-      // The fixed controls headers is otherwise rendered over the selection outlinem, Maybe there is an other solution
-      paddingTop: '2px',
       // Because the edit pane splitter handle area adds padding we can reduce it here
       paddingRight: theme.spacing(1),
     }),
diff --git a/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx b/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx
index f1198ecfae5..3b1c26e5460 100644
--- a/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx
+++ b/public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx
@@ -59,8 +59,6 @@ export function RowItemRenderer({ model }: SceneComponentProps<RowItem>) {
             styles.wrapper,
             !isCollapsed && styles.wrapperNotCollapsed,
             dragSnapshot.isDragging && styles.dragging,
-            isEditing && !isCollapsed && styles.wrapperEditing,
-            isEditing && isCollapsed && styles.wrapperEditingCollapsed,
             isCollapsed && styles.wrapperCollapsed,
             shouldGrow && styles.wrapperGrow,
             conditionalRenderingClass,
@@ -179,7 +177,7 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       alignItems: 'center',
       gap: theme.spacing(2),
-      fontSize: theme.typography.h5.fontSize,
+      ...theme.typography.h5,
       fontWeight: theme.typography.fontWeightMedium,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -207,7 +205,9 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       flexDirection: 'column',
       // Without this min height, the custom grid (SceneGridLayout) wont render
-      minHeight: `42px`,
+      // should be 1px more than row header + padding + margin
+      // consist of lineHeight + paddingBlock + margin + 0.125 = 39px
+      minHeight: theme.spacing(2.75 + 1 + 1 + 0.125),
     }),
     wrapperNotCollapsed: css({
       '> div:nth-child(2)': {
@@ -229,21 +229,6 @@ function getStyles(theme: GrafanaTheme2) {
     dragging: css({
       cursor: 'move',
     }),
-    wrapperEditing: css({
-      padding: theme.spacing(0.5),
-
-      '.dashboard-row-header': {
-        padding: 0,
-      },
-    }),
-    wrapperEditingCollapsed: css({
-      padding: theme.spacing(0.5),
-
-      '.dashboard-row-header': {
-        marginBottom: theme.spacing(0),
-        padding: 0,
-      },
-    }),
     wrapperGrow: css({
       flexGrow: 1,
     }),