Entity picker in dropdown when configuring a button in the modal cuts off available entities from view

[meanaverage]

If you have a lot of entities with the same prefix, you may not be able to find them in the list due to the fact the entity lists pops UP instead of DOWN inside the modal. As you can't scroll the modal UP, you can't see the full entity list. If the entity list actually dropped DOWN instead of up, this would likely never be an issue as you can scroll further down inside the modal view.

Example:

^^^^^ This screenshot was attained by 'pulling the list with all my might' to reveal a portion of the other available entities, but as you can see I still failed. There are more entries above that I cannot get to.

Possible solutions:
A.Pop list down instead
B. Factor space between the entity field and the top of the modal to draw the correct size of the pop-out. It appears my pop-out is larger than 5 items, but my list is drawn off of the accessible screen.

Note: This is less noticeable when you don't filter the list, but still occurs. It just may be cutting off items that you're not looking for when not filtered, so goes unnoticed.

Browser: Firefox 121.0.1
OS: MacOS Sonoma 14.2.1
Default MacBook Air M1 Resolution (1440x900)
Zoom: 100% Default

[matt8707]

This is not something I can fix. There are multiple issues with https://github.com/mskocik/svelecte, and I'm looking for a replacement.

[meanaverage]

For anyone viewing this that's anal, I'm using a workaround for now to get a wider modal so entity names aren't cut off left to right, and limiting dropdown to 180px so whether the menu drops down or up, entities are scroll-able up to the very first entry in the list.

// Function to apply changes to elements matching the '.contents.svelte-1j4iul' selector
function applyChangesToModalElement() {
    document.querySelectorAll('.contents.svelte-1j4iul').forEach(element => {
        element.style.width = '40rem'; // Set the width as needed
    });
}

// Observer for modal width adjustment
function setupModalWidthObserver() {
    const modalObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.matches && node.matches('.contents.svelte-1j4iul')) {
                        applyChangesToModalElement();
                    }
                });
            }
        });
    });

    modalObserver.observe(document.body, { childList: true, subtree: true });
    applyChangesToModalElement(); // Apply changes if the element is already in the DOM
}

// Function to check if an element is visible
function isElementVisible(element) {
    return element && (element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0);
}

// Observer for sv-dropdown-scroll height adjustment
function setupDropdownHeightObserver() {
    const dropdownObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            const dropdownElement = document.querySelector('.sv-dropdown-scroll.svelte-9227bl');
            if (dropdownElement && isElementVisible(dropdownElement)) {
                dropdownElement.style.setProperty('--sv-dropdown-height', '180px');
                dropdownObserver.disconnect();  // Adjust as needed
            }
        });
    });

    dropdownObserver.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
}

// Initialize observers
setupModalWidthObserver();
setupDropdownHeightObserver();

Applies the CSS changes automatically when added to custom_javascript.js. Definitely not a good long-term solution, but in a pinch if you have entities you can't find or identify due to screen resolution issues it could help.

Edit: confirmed this survived the last update.