fix: use fixed spotlight div instead of element box-shadow to avoid sidebar overflow clipping

Author: ddrayko

public/css/style.css

@@ -4523,11 +4523,15 @@ tbody tr:hover {
   min-width: 100px;
 }
 
-.onboarding-highlight {
-  position: relative !important;
-  z-index: 10000 !important;
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7) !important;
+.onboarding-spotlight {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
   border-radius: var(--radius-sm);
+  background: transparent;
+  outline: 2px solid rgba(238, 129, 50, 0.25);
+  outline-offset: -1px;
 }
 
 .onboarding-dots {

public/js/app.js

@@ -4047,20 +4047,38 @@ let onboardingStep = 0;
 let onboardingHighlightEl = null;
 
 function clearOnboardingHighlight() {
-  if (onboardingHighlightEl) {
-    onboardingHighlightEl.classList.remove('onboarding-highlight');
-    onboardingHighlightEl = null;
-  }
+  const spotlight = $('#onboarding-spotlight');
+  if (spotlight) spotlight.style.display = 'none';
+  const el = $('#onboarding-highlight-el');
+  if (el) el.removeAttribute('id');
+  onboardingHighlightEl = null;
 }
 
 function applyOnboardingHighlight(selector) {
   clearOnboardingHighlight();
   if (!selector) return;
+
   const el = document.querySelector(selector);
-  if (el) {
-    el.classList.add('onboarding-highlight');
-    onboardingHighlightEl = el;
+  if (!el) return;
+
+  const rect = el.getBoundingClientRect();
+
+  let spotlight = $('#onboarding-spotlight');
+  if (!spotlight) {
+    spotlight = document.createElement('div');
+    spotlight.id = 'onboarding-spotlight';
+    spotlight.className = 'onboarding-spotlight';
+    const overlay = $('#onboarding-overlay');
+    if (overlay) overlay.appendChild(spotlight);
   }
+
+  spotlight.style.left = rect.left + 'px';
+  spotlight.style.top = rect.top + 'px';
+  spotlight.style.width = rect.width + 'px';
+  spotlight.style.height = rect.height + 'px';
+  spotlight.style.display = 'block';
+
+  onboardingHighlightEl = spotlight;
 }
 
 function positionOnboardingCard(selector) {