fix: onboarding highlight properly reveals elements, card positioned near target

Author: ddrayko

public/css/style.css

@@ -4438,42 +4438,79 @@ tbody tr:hover {
   position: fixed;
   inset: 0;
   z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  pointer-events: none;
 }
 
 .onboarding-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
-  transition: opacity 0.25s ease;
+  pointer-events: none;
 }
 
 .onboarding-card {
-  position: relative;
-  z-index: 10001;
+  pointer-events: auto;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
-  padding: 40px 36px;
-  max-width: 480px;
+  padding: 32px 28px;
+  max-width: 440px;
   width: 90%;
   box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
   text-align: center;
+  position: fixed;
+  z-index: 10001;
+}
+
+.onboarding-card.centered {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.onboarding-card .card-arrow {
+  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;
+}
+
+.onboarding-card .card-arrow.up {
+  top: -8px;
+  left: 50%;
+  margin-left: -7px;
+  transform: rotate(45deg);
+  border-left-color: var(--border);
+  border-top-color: var(--border);
+  border-right: none;
+  border-bottom: none;
+}
+
+.onboarding-card .card-arrow.down {
+  bottom: -8px;
+  left: 50%;
+  margin-left: -7px;
+  transform: rotate(225deg);
+  border-left-color: var(--border);
+  border-top-color: var(--border);
+  border-right: none;
+  border-bottom: none;
 }
 
 .onboarding-card h2 {
-  font-size: 1.4rem;
+  font-size: 1.3rem;
   font-weight: 700;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .onboarding-card p {
-  font-size: 0.92rem;
+  font-size: 0.9rem;
   color: var(--text-secondary);
-  line-height: 1.65;
-  margin-bottom: 28px;
+  line-height: 1.6;
+  margin-bottom: 24px;
 }
 
 .onboarding-card .onboarding-actions {
@@ -4483,7 +4520,7 @@ tbody tr:hover {
 }
 
 .onboarding-card .onboarding-actions .btn {
-  min-width: 110px;
+  min-width: 100px;
 }
 
 .onboarding-highlight {
@@ -4497,7 +4534,7 @@ tbody tr:hover {
   display: flex;
   gap: 6px;
   justify-content: center;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .onboarding-dot {

public/js/app.js

@@ -4063,22 +4063,84 @@ function applyOnboardingHighlight(selector) {
   }
 }
 
+function positionOnboardingCard(selector) {
+  const card = $('#onboarding-card');
+  if (!card) return;
+
+  if (!selector) {
+    card.classList.add('centered');
+    const arrow = card.querySelector('.card-arrow');
+    if (arrow) arrow.remove();
+    return;
+  }
+
+  card.classList.remove('centered');
+
+  const el = document.querySelector(selector);
+  if (!el) return;
+
+  const elRect = el.getBoundingClientRect();
+  const cardW = 440;
+  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, arrowDir;
+
+  // Try below first
+  const spaceBelow = window.innerHeight - elRect.bottom;
+  const spaceAbove = elRect.top;
+  const approxCardH = Math.min(360, cardMaxH);
+
+  if (spaceBelow >= approxCardH + gap + 20) {
+    top = elRect.bottom + gap;
+    arrowDir = 'up';
+  } else if (spaceAbove >= approxCardH + gap + 20) {
+    top = elRect.top - gap - approxCardH;
+    arrowDir = 'down';
+  } else {
+    // Center as fallback
+    top = Math.max(20, (window.innerHeight - approxCardH) / 2);
+    arrowDir = null;
+  }
+
+  // Center card horizontally under the element, but clamp to viewport
+  let left = elRect.left + elRect.width / 2 - cardW / 2;
+  left = Math.max(16, Math.min(left, window.innerWidth - cardW - 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}`;
+  } else {
+    arrow.remove();
+  }
+}
+
 function renderOnboardingStep(stepIndex) {
   const card = $('#onboarding-card');
   if (!card) return;
 
   const step = ONBOARDING_STEPS[stepIndex];
-  const isLast = stepIndex === ONBOARDING_STEPS.length - 1;
-  const isFirst = stepIndex === 0;
 
   let dotsHtml = '<div class="onboarding-dots">';
   ONBOARDING_STEPS.forEach((_, i) => {
     dotsHtml += `<span class="onboarding-dot ${i === stepIndex ? 'active' : ''}"></span>`;
   });
   dotsHtml += '</div>';
 
-  const leftBtn = step.buttons[0]; // Skip
-  const rightBtn = step.buttons[1]; // Start / Next / Got it!
+  const leftBtn = step.buttons[0];
+  const rightBtn = step.buttons[1];
 
   card.innerHTML = html`
     ${dotsHtml}
@@ -4090,7 +4152,16 @@ function renderOnboardingStep(stepIndex) {
     </div>
   `;
 
-  applyOnboardingHighlight(step.highlight);
+  const backdrop = $('#onboarding-backdrop');
+  if (step.highlight) {
+    if (backdrop) backdrop.style.display = 'none';
+    applyOnboardingHighlight(step.highlight);
+  } else {
+    if (backdrop) backdrop.style.display = 'block';
+    clearOnboardingHighlight();
+  }
+
+  positionOnboardingCard(step.highlight);
   initIcons();
 }
 
@@ -4106,24 +4177,26 @@ async function startOnboarding() {
   overlay.id = 'onboarding-overlay';
   overlay.className = 'onboarding-overlay';
   overlay.innerHTML = html`
-    <div class="onboarding-backdrop" id="onboarding-backdrop"></div>
-    <div class="onboarding-card" id="onboarding-card"></div>
+    <div class="onboarding-backdrop" id="onboarding-backdrop" style="display:none"></div>
+    <div class="onboarding-card centered" id="onboarding-card"></div>
   `;
   document.body.appendChild(overlay);
 
   renderOnboardingStep(0);
 
-  $('#onboarding-skip').addEventListener('click', stopOnboarding);
-  $('#onboarding-next').addEventListener('click', () => {
-    if (onboardingStep === 0) {
-      onboardingStep = 1;
-      renderOnboardingStep(onboardingStep);
-      $('#onboarding-skip').addEventListener('click', stopOnboarding);
-      $('#onboarding-next').addEventListener('click', handleOnboardingNext);
-    } else {
-      handleOnboardingNext();
-    }
-  });
+  const attachListeners = () => {
+    $('#onboarding-skip').addEventListener('click', stopOnboarding);
+    $('#onboarding-next').addEventListener('click', () => {
+      if (onboardingStep === 0) {
+        onboardingStep = 1;
+        renderOnboardingStep(onboardingStep);
+        attachListeners();
+      } else {
+        handleOnboardingNext();
+      }
+    });
+  };
+  attachListeners();
 }
 
 function handleOnboardingNext() {