Dynamic Dashboards: UI fixes (#103352)

public/app/features/dashboard-scene/conditional-rendering/ConditionalRenderingOverlay.tsx

@@ -31,6 +31,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     height: '100%',
     bottom: 0,
     right: 0,
+    zIndex: 1,
 
     [theme.transitions.handleMotion('no-preference', 'reduce')]: {
       transition: 'all 0.2s ease',

public/app/features/dashboard-scene/scene/layout-rows/RowItemRenderer.tsx

@@ -131,7 +131,7 @@ export function RowItemRenderer({ model }: SceneComponentProps<RowItem>) {
                   )}
                 </span>
               </button>
-              {isDraggable && <Icon name="draggabledots" />}
+              {isDraggable && <Icon name="draggabledots" className="dashboard-row-header-drag-handle" />}
             </div>
           )}
           {!isCollapsed && <layout.Component model={layout} />}
@@ -151,6 +151,20 @@ function getStyles(theme: GrafanaTheme2) {
       alignItems: 'center',
       justifyContent: 'space-between',
       marginBottom: theme.spacing(1),
+
+      '& .dashboard-row-header-drag-handle': css({
+        opacity: 0,
+
+        [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+          transition: 'opacity 0.25s',
+        },
+      }),
+
+      '&:hover': css({
+        '& .dashboard-row-header-drag-handle': css({
+          opacity: 1,
+        }),
+      }),
     }),
     rowTitleButton: css({
       display: 'flex',

public/app/features/dashboard-scene/scene/layout-rows/RowsLayoutManager.tsx

@@ -194,8 +194,8 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
             config.push({
               title: child.state.title,
               isCollapsed: !!child.state.isCollapsed,
-              isDraggable: child.state.isDraggable ?? layout.state.grid.state.isDraggable,
-              isResizable: child.state.isResizable ?? layout.state.grid.state.isResizable,
+              isDraggable: child.state.isDraggable,
+              isResizable: child.state.isResizable,
               children: child.state.children,
               repeat: behaviour?.state.variableName,
             });
@@ -220,8 +220,8 @@ export class RowsLayoutManager extends SceneObjectBase<RowsLayoutManagerState> i
             collapse: !!rowConfig.isCollapsed,
             layout: DefaultGridLayoutManager.fromGridItems(
               rowConfig.children,
-              rowConfig.isDraggable,
-              rowConfig.isResizable
+              rowConfig.isDraggable ?? layout.state.grid.state.isDraggable,
+              rowConfig.isResizable ?? layout.state.grid.state.isResizable
             ),
             $behaviors: rowConfig.repeat ? [new RowItemRepeaterBehavior({ variableName: rowConfig.repeat })] : [],
           })