Displaying images instead of URLs in Xano view mode

Hi! I find Xano tables view mode absolutely amazing thanks to the available filters and sorting options.

The only issue is that you cannot view images in columns; you can only see their URLs. I managed to write a simple Tampermonkey script that successfully converts image URLs into actual images on pages like this one: [https://x.kindbot.me/share/tvEkO5BNYEWMZNVLSjt-NkPBxfI].

However, I encountered a problem: I didn't manage to adjust the heights of the table rows to allow the images to fit properly:

I am also attaching my current Tampermonkey script, which converts image URLs into images:

// ==UserScript==
// @name         Convert Image URLs to Images
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Automatically convert visible image URLs to images on any webpage
// @author       You
// @match        https://x.kindbot.me/share/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Function to convert text URLs to images
    const convertToImages = () => {
        const elements = document.querySelectorAll('app-dbo-table-cell.text.table-cell.table-cell-body.dbo-table-cell');

        elements.forEach(element => {
            const span = element.querySelector('.value');
            if (span && span.innerText.startsWith('http')) {
                const imageUrl = span.innerText;
                const imgTag = document.createElement('img');
                imgTag.src = imageUrl;
                imgTag.style.maxWidth = '100%';  // Adjust image styling as needed
                imgTag.style.minHeight = '300px';
                imgTag.style.height = 'auto';
                element.replaceChild(imgTag, span);
            }
        });
    };

    // MutationObserver to handle dynamic content
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList' && mutation.addedNodes.length) {
                convertToImages();  // Re-run the conversion on new elements
            }
        });
    });

    // Observer options
    const config = { childList: true, subtree: true };

    // Start observing the body for changes
    observer.observe(document.body, config);

    // Initial conversion on page load
    window.addEventListener('load', convertToImages);

})();

If you could help me adjust the heights of the table rows using some CSS or a JavaScript, I would be very grateful.