fix: use CSS triangle pseudo-elements for onboarding arrows instead of rotated div

Author: ddrayko

public/css/style.css

@@ -4468,47 +4468,66 @@ tbody tr:hover {
   transform: translate(-50%, -50%);
 }
 
-.onboarding-card .card-arrow {
+.onboarding-card[data-arrow]::before,
+.onboarding-card[data-arrow]::after {
+  content: '';
   position: absolute;
-  width: 14px;
-  height: 14px;
-  background: var(--bg-card);
-  border-left: 1px solid var(--border);
-  border-top: 1px solid var(--border);
-  z-index: 1;
+  width: 0;
+  height: 0;
 }
 
-.onboarding-card .card-arrow.up {
-  top: -8px;
+.onboarding-card[data-arrow="up"]::before {
+  top: -10px;
   left: 50%;
-  margin-left: -7px;
-  transform: rotate(45deg);
-  border-left-color: var(--border);
-  border-top-color: var(--border);
-  border-right: none;
-  border-bottom: none;
+  margin-left: -10px;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-bottom: 10px solid var(--border);
 }
 
-.onboarding-card .card-arrow.down {
-  bottom: -8px;
+.onboarding-card[data-arrow="up"]::after {
+  top: -9px;
   left: 50%;
-  margin-left: -7px;
-  transform: rotate(225deg);
-  border-left-color: var(--border);
-  border-top-color: var(--border);
-  border-right: none;
-  border-bottom: none;
+  margin-left: -9px;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 9px solid var(--bg-card);
 }
 
-.onboarding-card .card-arrow.left {
-  left: -8px;
+.onboarding-card[data-arrow="down"]::before {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid var(--border);
+}
+
+.onboarding-card[data-arrow="down"]::after {
+  bottom: -9px;
+  left: 50%;
+  margin-left: -9px;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-top: 9px solid var(--bg-card);
+}
+
+.onboarding-card[data-arrow="left"]::before {
+  left: -10px;
   top: 50%;
-  margin-top: -7px;
-  transform: rotate(-45deg);
-  border-left-color: var(--border);
-  border-top-color: var(--border);
-  border-right: none;
-  border-bottom: none;
+  margin-top: -10px;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid var(--border);
+}
+
+.onboarding-card[data-arrow="left"]::after {
+  left: -9px;
+  top: 50%;
+  margin-top: -9px;
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  border-right: 9px solid var(--bg-card);
 }
 
 .onboarding-card h2 {

public/js/app.js

@@ -4090,8 +4090,7 @@ function positionOnboardingCard(selector) {
     card.style.top = '';
     card.style.left = '';
     card.style.transform = '';
-    const arrow = card.querySelector('.card-arrow');
-    if (arrow) arrow.remove();
+    delete card.dataset.arrow;
     return;
   }
 
@@ -4105,13 +4104,6 @@ function positionOnboardingCard(selector) {
   const cardMaxH = window.innerHeight - 80;
   const gap = 14;
 
-  // Remove old arrow and create a new one
-  const oldArrow = card.querySelector('.card-arrow');
-  if (oldArrow) oldArrow.remove();
-  const arrow = document.createElement('div');
-  arrow.className = 'card-arrow';
-  card.appendChild(arrow);
-
   let top, left, arrowDir;
   const approxCardH = Math.min(360, cardMaxH);
 
@@ -4145,16 +4137,14 @@ function positionOnboardingCard(selector) {
   left = Math.max(16, Math.min(left, window.innerWidth - cardW - 16));
   top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
 
-  top = Math.max(16, Math.min(top, window.innerHeight - approxCardH - 16));
-
   card.style.top = top + 'px';
   card.style.left = left + 'px';
   card.style.transform = 'none';
 
   if (arrowDir) {
-    arrow.className = `card-arrow ${arrowDir}`;
+    card.dataset.arrow = arrowDir;
   } else {
-    arrow.remove();
+    delete card.dataset.arrow;
   }
 }