Issue with mutation details display

[shanept]

Hi,

Browser: Google Chrome Version 125.0.6422.141 (Official Build) (64-bit) OS: Ubuntu 24.04

I have noticed an issue with the display of the details section for my mutations. My log file was generated with PHP Infection, and uses the mutation-testing-elements framework to render this display, which is where I find this bug.

As you can see by this screenshot, there is a final list item, that is obscured by the bottom of the page. I can not scroll any further than this.

Upon digging into the code on the webpage, I notice that I have lost 60px of view from this section, and I also notice that the header is 60px tall.

Through a few style modifications, I have been able to make the page work as expected. These modifications can be summarised with the following JS code, run in my browser console:

(function() {
    var drawer = document.querySelector("body > mutation-test-report-app").shadowRoot.querySelector("#mte-mutant-view").shadowRoot.querySelector("mte-drawer-mutant").shadowRoot.querySelector("mte-drawer");
    var detail = drawer.shadowRoot.querySelector("aside > div > div");
    var height = drawer.clientHeight;
    var headerHeight = detail.previousElementSibling.clientHeight;
    detail.classList.remove('fixed');
    detail.style.height = (height - headerHeight) + 'px';
})();

Here is my end result:

Thanks

[hugo-vrijswijk]

@shanept Thanks for opening this issue. This is fixed and released in 3.1.1 now