From bfb1d8e6b73eeb1f6bfebb8e71cebb11976be920 Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Sat, 13 Jul 2024 18:42:31 +0200
Subject: [PATCH] Move warning msg below viz (#10546)

Fixes [10450](https://github.com/enso-org/enso/issues/10450)

![image](https://github.com/user-attachments/assets/21efe4e0-922b-4a83-8f6e-ddaea360e655)
---
 CHANGELOG.md                                      |  2 ++
 app/gui2/src/components/GraphEditor/GraphNode.vue | 10 ++--------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3497df98c3..acf4e7eb07a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,10 +13,12 @@
   node being completely altered by accidental code put to the widget.
 - [Redesigned "record control" panel][10509]. Now it contains more intuitive
   "refresh" and "run workflow" buttons.
+- [Warning messages do not obscure visualization buttons][10546].
 
 [10433]: https://github.com/enso-org/enso/pull/10443
 [10457]: https://github.com/enso-org/enso/pull/10457
 [10509]: https://github.com/enso-org/enso/pull/10509
+[10546]: https://github.com/enso-org/enso/pull/10546
 
 #### Enso Enso Standard Library
 
diff --git a/app/gui2/src/components/GraphEditor/GraphNode.vue b/app/gui2/src/components/GraphEditor/GraphNode.vue
index cc3aa30face..36cb42b0a2f 100644
--- a/app/gui2/src/components/GraphEditor/GraphNode.vue
+++ b/app/gui2/src/components/GraphEditor/GraphNode.vue
@@ -555,7 +555,7 @@ watchEffect(() => {
     </svg>
     <SmallPlusButton
       v-if="menuVisible && isVisualizationVisible"
-      class="below-viz"
+      class="afterNode"
       @createNodes="emit('createNodes', $event)"
     />
   </div>
@@ -665,6 +665,7 @@ watchEffect(() => {
   position: absolute;
   top: 100%;
   margin-top: 4px;
+  transform: translateY(var(--viz-below-node));
 }
 
 .messageWithMenu {
@@ -705,11 +706,4 @@ watchEffect(() => {
 .dragged {
   cursor: grabbing !important;
 }
-
-.below-viz {
-  position: absolute;
-  top: 100%;
-  transform: translateY(var(--viz-below-node));
-  margin-top: 4px;
-}
 </style>