Identify Elements Causing Horizontal Overflow

Identify Elements Causing Horizontal Overflow.js

(() => {
  // Remove any existing highlights
  document.querySelectorAll('.overflow-highlight').forEach(el => {
    el.style.outline = '';
    el.classList.remove('overflow-highlight');
  });

  // Get viewport width
  const viewportWidth = document.documentElement.clientWidth;
  
  // Check all elements
  document.querySelectorAll('*').forEach(element => {
    const rect = element.getBoundingClientRect();
    
    // Check if element extends beyond viewport width
    if (rect.right > viewportWidth || rect.left < 0) {
      element.style.outline = '2px solid red';
      element.classList.add('overflow-highlight');
      
      console.log('Overflow element found:', {
        element: element.tagName,
        id: element.id,
        class: element.className,
        width: rect.width,
        right: rect.right,
        viewportWidth,
        overflowAmount: Math.max(rect.right - viewportWidth, -rect.left)
      });
    }
  });

  console.log('Scan complete. Check elements highlighted in red.');
})();