prevent small gap on windows chrome between triangle and element

Author: devhelpr

libs/visual-programming-system/src/utils/create-rect-node.tsx

@@ -426,13 +426,13 @@ export const createRectNode = <T extends BaseNodeInfo>(
         errorNode = createElement(
           'div',
           {
-            class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+15px)] h-[min-content] w-full
+            class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+8px)] h-[min-content] w-full
             after:content-['']
             after:w-0 after:h-0 
             after:border-l-[10px] after:border-l-transparent
             after:border-t-[10px] after:border-t-red-500
             after:border-r-[10px] after:border-r-transparent
-            after:absolute after:bottom-[-9px] after:left-[50%] after:transform after:translate-x-[-50%]
+            after:absolute after:bottom-[-8px] after:left-[50%] after:transform after:translate-x-[-50%]
           `,
           },
           rect.nodeComponent?.domElement,

libs/web-flow-executor/src/nodes/expression-execute.ts

@@ -151,13 +151,13 @@ export const getExpressionExecute: NodeTaskFactory<NodeInfo> = (
       errorNode = createElement(
         'div',
         {
-          class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+15px)] h-[min-content] w-full hidden
+          class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+8px)] h-[min-content] w-full hidden
             after:content-['']
             after:w-0 after:h-0 
             after:border-l-[10px] after:border-l-transparent
             after:border-t-[10px] after:border-t-red-500
             after:border-r-[10px] after:border-r-transparent
-            after:absolute after:bottom-[-9px] after:left-[50%] after:transform after:translate-x-[-50%]
+            after:absolute after:bottom-[-8px] after:left-[50%] after:transform after:translate-x-[-50%]
           `,
         },
         rect.nodeComponent.domElement,

libs/web-flow-executor/src/nodes/expression.ts

@@ -372,13 +372,13 @@ export const getExpression: NodeTaskFactory<NodeInfo> = (
       errorNode = createElement(
         'div',
         {
-          class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+15px)] h-[min-content] w-full hidden
+          class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+8px)] h-[min-content] w-full hidden
             after:content-['']
             after:w-0 after:h-0 
             after:border-l-[10px] after:border-l-transparent
             after:border-t-[10px] after:border-t-red-500
             after:border-r-[10px] after:border-r-transparent
-            after:absolute after:bottom-[-9px] after:left-[50%] after:transform after:translate-x-[-50%]
+            after:absolute after:bottom-[-8px] after:left-[50%] after:transform after:translate-x-[-50%]
           `,
         },
         rect.nodeComponent?.domElement,

libs/web-flow-executor/src/nodes/fetch.ts

@@ -458,13 +458,13 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
         errorNode = createElement(
           'div',
           {
-            class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+15px)] h-[min-content] w-full hidden
+            class: `bg-red-500 p-4 rounded absolute bottom-[calc(100%+8px)] h-[min-content] w-full hidden
             after:content-['']
             after:w-0 after:h-0 
             after:border-l-[10px] after:border-l-transparent
             after:border-t-[10px] after:border-t-red-500
             after:border-r-[10px] after:border-r-transparent
-            after:absolute after:bottom-[-9px] after:left-[50%] after:transform after:translate-x-[-50%]
+            after:absolute after:bottom-[-8px] after:left-[50%] after:transform after:translate-x-[-50%]
           `,
           },
           rect.nodeComponent.domElement,

libs/web-flow-executor/src/nodes/node-utils/create-preview-tip.ts

@@ -10,14 +10,14 @@ export const createPreviewTip = <T extends BaseNodeInfo>(
   return createElement(
     'div',
     {
-      class: `bg-white text-black p-4 rounded absolute bottom-[calc(100%+15px)] h-[min-content] w-full hidden
+      class: `bg-white text-black p-4 rounded absolute bottom-[calc(100%+8px)] h-[min-content] w-full hidden
             text-center
             after:content-['']
             after:w-0 after:h-0 
             after:border-l-[10px] after:border-l-transparent
             after:border-t-[10px] after:border-t-white
             after:border-r-[10px] after:border-r-transparent
-            after:absolute after:bottom-[-9px] after:left-[50%] after:transform after:translate-x-[-50%]
+            after:absolute after:bottom-[-8px] after:left-[50%] after:transform after:translate-x-[-50%]
           `,
     },
     node?.domElement,