From 209b58306d02e9c7bd695c95fea78cc9cbe0e377 Mon Sep 17 00:00:00 2001
From: Doruk <peak@peaktwilight.com>
Date: Thu, 19 Jun 2025 19:57:27 +0200
Subject: [PATCH] rotated square hack for border (since triangle svg doesn't
 support it :D

---
 src/components/Tooltip.vue | 39 +++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 053202e52..930477b44 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -189,18 +189,36 @@ export default {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
-        width: 0;
-        height: 0;
-        border-left: 6px solid transparent;
-        border-right: 6px solid transparent;
-        border-bottom: 6px solid rgba(17, 24, 39, 0.95);
+        width: 12px;
+        height: 6px;
+        overflow: hidden;
         top: -6px;
 
+        &::before {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 100%;
+            transform: translateX(-50%) translateY(-50%) rotate(45deg);
+            width: 8px;
+            height: 8px;
+            background: rgba(17, 24, 39, 0.95);
+            border: 1px solid rgba(75, 85, 99, 0.3);
+            border-bottom: none;
+            border-right: none;
+        }
+
         &.arrow-above {
             top: auto;
             bottom: -6px;
-            border-bottom: none;
-            border-top: 6px solid rgba(17, 24, 39, 0.95);
+
+            &::before {
+                top: 0%;
+                transform: translateX(-50%) translateY(-50%) rotate(225deg);
+                border: 1px solid rgba(75, 85, 99, 0.3);
+                border-bottom: none;
+                border-right: none;
+            }
         }
     }
 
@@ -229,10 +247,9 @@ export default {
     }
 
     .tooltip-arrow {
-        border-bottom-color: rgba(31, 41, 55, 0.95);
-
-        &.arrow-above {
-            border-top-color: rgba(31, 41, 55, 0.95);
+        &::before {
+            background: rgba(31, 41, 55, 0.95);
+            border-color: rgba(107, 114, 128, 0.3);
         }
     }
 }