RowItemRenderer: Fix row jumping when entering edit mode (#105453)

fix row jumping when entering edit mode

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

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