@me/toolkit: Console Tricks

Viewport Overflow

Problem

Mysterious elements that are overflowing beyond the viewport

Common Culprits

  • Long unbroken strings (slugs, URLs, tags without spaces)
  • Code blocks without overflow-x: auto
  • Filter pill rows that don't wrap
  • Grid or flex containers with fixed gap and no flex-wrap

Diagnose

Paste this into your browser console on the problem page:

consolejavascript
document.querySelectorAll('*').forEach(el => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth) {
    console.log(el)
  }
})

CSS Solution Options

overflow-wrap: break-word;

word-break: break-word;

overflow: hidden;