admin 4: banner preview fix

<style>
table {
    overflow: hidden;
}
table td:first-child {
    white-space: nowrap;
}

table tr:first-child td {
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    text-align: left;
}
table tr:first-child td b {
    display: inline-block;
    font-weight: normal;
    letter-spacing: 0.1px;
}
table tr:first-child td b a {
    padding: 5px 2px 0 2px;
}

table .banner-preview {
    display: none;
    position: absolute;
    bottom: 105%;

    writing-mode: horizontal-tb;
    transform: rotate(-180deg) translateX(50%);

    background: white;
    border: 1px solid #888;
    padding: 5px;
}

table .banner-preview span {
    display: inline-block;
    color: black;
    margin-top: 5px;
    font-size: 14px;
}

table a:hover .banner-preview {
    display: block;
}
</style>

<script>
const BASE_FOLDER = "https://st.gsmarena.com/imgroot/static/banners/self/";

window.addEventListener("DOMContentLoaded", function () {
    const links = document.querySelectorAll("table a");
    for (const link of links) {
        const match = link.innerText.match(/\[[^\]]+\](.+)/);
        if (!match) continue;

        const container = document.createElement("div");
        container.classList = "banner-preview";

        const image = document.createElement("img");
        image.src = BASE_FOLDER + match[1];

        const text = document.createElement("span");
        text.innerText = link.innerText;

        container.appendChild(image);
        container.appendChild(text);
        link.appendChild(container);

        link.onmouseenter = function () {
            const banner = this.querySelector(".banner-preview");
            const rect = banner.getBoundingClientRect();
            const image = banner.querySelector("img")

            setTimeout(function () {
                if (rect.right > screen.width) {
                    banner.style.left = (rect.right - screen.width + 30) + "px";
                } else if (rect.left < 0) {
                    banner.style.left = (rect.left) + "px";
                } else {
                    banner.style.left = "";
                }
            }, 0);
        };
        link.onmouseleave = function () {
            const banner = this.querySelector(".banner-preview");
            banner.style.left = "";
        };
    }
});
</script>