diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php index 03502bbd8f..37651816e6 100644 --- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php +++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php @@ -500,12 +500,17 @@ return function (root, x) { function showCurrent(state) { - var currentNode = state.current(); + var currentNode = state.current(), currentRect, searchRect; if (currentNode) { reveal(currentNode); highlight(root, currentNode, state.nodes); if ('scrollIntoView' in currentNode) { - currentNode.scrollIntoView(); + currentNode.scrollIntoView(true); + currentRect = currentNode.getBoundingClientRect(); + searchRect = search.getBoundingClientRect(); + if (currentRect.top < (searchRect.top + searchRect.height)) { + window.scrollBy(0, -(searchRect.top + searchRect.height + 5)); + } } } counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' of ' + state.count(); @@ -641,6 +646,7 @@ pre.sf-dump { display: block; white-space: pre; padding: 5px; + overflow: initial !important; } pre.sf-dump:after { content: ""; @@ -709,14 +715,16 @@ pre.sf-dump code { border-radius: 3px; } pre.sf-dump .sf-dump-search-hidden { - display: none; + display: none !important; } pre.sf-dump .sf-dump-search-wrapper { - float: right; font-size: 0; white-space: nowrap; - max-width: 100%; - text-align: right; + margin-bottom: 5px; + display: flex; + position: -webkit-sticky; + position: sticky; + top: 5px; } pre.sf-dump .sf-dump-search-wrapper > * { vertical-align: top; @@ -733,10 +741,11 @@ pre.sf-dump .sf-dump-search-wrapper > input.sf-dump-search-input { height: 21px; font-size: 12px; border-right: none; - width: 140px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; color: #000; + min-width: 15px; + width: 100%; } pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next, pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous {