From 48c3c7fffb94ee1dfc6f1100e96ee6ccb402fece Mon Sep 17 00:00:00 2001
From: Adam Obuchowicz <adam.obuchowicz@enso.org>
Date: Tue, 3 Dec 2024 15:36:31 +0100
Subject: [PATCH] Quickfix Graph Editor styles (#11746)

A @jdunkerley 's propsal of fixing issue [#11728](https://github.com/enso-org/enso/issues/11728)

![image](https://github.com/user-attachments/assets/74da5807-7bac-4c18-a86a-c068cc19632f)
---
 app/gui/src/project-view/components/GraphEditor/GraphEdge.vue   | 2 +-
 app/gui/src/project-view/components/GraphEditor/GraphNode.vue   | 2 +-
 .../project-view/components/GraphEditor/GraphNodeComment.vue    | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue b/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue
index 354e32997f..6539afffd8 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphEdge.vue
@@ -512,7 +512,7 @@ const backwardEdgeArrowTransform = computed<string | undefined>(() => {
 const arrowHeight = 9
 const arrowYOffset = 0
 const arrowTransform = computed<string | undefined>(() => {
-  const arrowTopOffset = 4
+  const arrowTopOffset = 1
   const arrowWidth = 12
   const target = targetPos.value
   if (target == null) return
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNode.vue b/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
index 147575e0c9..16574f0fad 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphNode.vue
@@ -639,7 +639,7 @@ const showMenuAt = ref<{ x: number; y: number }>()
   transition: box-shadow 0.2s ease-in-out;
   box-sizing: border-box;
   /** Space between node and component above and below, such as comments and errors. */
-  --node-vertical-gap: 4px;
+  --node-vertical-gap: 5px;
 
   --color-node-primary: var(--node-group-color);
   --node-color-port: color-mix(in oklab, var(--color-node-primary) 85%, white 15%);
diff --git a/app/gui/src/project-view/components/GraphEditor/GraphNodeComment.vue b/app/gui/src/project-view/components/GraphEditor/GraphNodeComment.vue
index 62d31d6810..089946aa1b 100644
--- a/app/gui/src/project-view/components/GraphEditor/GraphNodeComment.vue
+++ b/app/gui/src/project-view/components/GraphEditor/GraphNodeComment.vue
@@ -32,6 +32,7 @@ syncRef(editing, useFocusDelayed(textEditorContent).focused)
   min-width: 22px;
   border-radius: var(--radius-default);
   background-color: var(--node-color-no-type);
+  opacity: 0.8;
   color: var(--color-text-inversed);
   font-weight: 400;
 }