Dashboards: Prevent row selection when clicking canvas add actions (#115580)

* event propogation issues

* Action items width

* prevent pointer up event

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -248,15 +248,17 @@ export function PanelChrome({
 
   const onContentPointerDown = React.useCallback(
     (evt: React.PointerEvent) => {
-      // Ignore clicks inside buttons, links, canvas and svg elments
+      // When selected, ignore clicks inside buttons, links, canvas and svg elments
       // This does prevent a clicks inside a graphs from selecting panel as there is normal div above the canvas element that intercepts the click
-      if (evt.target instanceof Element && evt.target.closest('button,a,canvas,svg')) {
+      if (isSelected && evt.target instanceof Element && evt.target.closest('button,a,canvas,svg')) {
+        // Stop propagation otherwise row config editor will get selected
+        evt.stopPropagation();
         return;
       }
 
       onSelect?.(evt);
     },
-    [onSelect]
+    [isSelected, onSelect]
   );
 
   const headerContent = (

public/app/features/dashboard-scene/scene/layouts-shared/CanvasGridAddActions.tsx

@@ -59,7 +59,11 @@ export function CanvasGridAddActions({ layoutManager }: Props) {
   }, [layoutManager]);
 
   return (
-    <div className={cx(styles.addAction, 'dashboard-canvas-add-button')}>
+    <div
+      className={cx(styles.addAction, 'dashboard-canvas-add-button')}
+      onPointerUp={(evt) => evt.stopPropagation()}
+      onPointerDown={(evt) => evt.stopPropagation()}
+    >
       <Button
         variant="primary"
         fill="text"
@@ -189,7 +193,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     height: theme.spacing(5),
     bottom: 0,
     left: 0,
-    right: 0,
     opacity: 0,
     [theme.transitions.handleMotion('no-preference', 'reduce')]: {
       transition: theme.transitions.create('opacity'),