there should be no scrollbars, the whole gallery container with everything inside of it should auto-fit strictly within available space in viewport. so, basically everything got resized dramatically based on window size width and height. output modified code but without any backticks used in template literals, do it in old fashioned method through + and ': <!DOCTYPE html>
<html>
<head>
    <title>Auto-Updating Image Gallery</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden; 
    }

    .container {
        position: relative;
        height: 100vh; 
        display: flex;
        flex-direction: column;
    }

    #gallery {
        flex: 1; 
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
        align-items: start;
        justify-items: center;
        padding: 50px;
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch; 
    }

    .gallery-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
    }

    .image-placeholder {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-color: lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    #updateButtonContainer {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    #rangeSlider {
        width: 100%;
        margin-top: 10px;
    }
    </style>
</head>
<body>
    <div class='container'>
        <div id='updateButtonContainer'>
            <button id='updateButton' onclick='manualUpdate()'>Manual Update</button>
            <label for='autoUpdate'>Auto-Update:</label>
            <input type='checkbox' id='autoUpdate' onchange='toggleAutoUpdate()' />
        </div>
        
        <h1>Auto-Updating Image Gallery</h1>
        
        <div id='gallery'></div>
        
        <input type='range' id='rangeSlider' min='1' max='200' step='1' value='1' onchange='updateRange(this.value)' />
    </div>

    <script>
        const gallery = document.getElementById('gallery');
        const autoUpdateCheckbox = document.getElementById('autoUpdate');
        const updateButton = document.getElementById('updateButton');
        const rangeSlider = document.getElementById('rangeSlider');
        const imageUrl = 'https://camenduru-com-webui-docker.hf.space/file=outputs/extras-images/';
        let intervalId;
        let currentRange = 1;

// Function to fetch and update the gallery
function updateGallery() {
    gallery.innerHTML = ''; // Clear existing gallery images

    for (let i = currentRange; i <= currentRange + 9; i++) {
        if (i <= currentRange + 9) {
            const imageContainer = document.createElement('div');
            imageContainer.classList.add('image-container');
            
            const image = new Image();
            const imageSrc = imageUrl + padNumberWithZero(i, 5) + '.png';
            image.src = imageSrc;
            image.classList.add('gallery-image');
            image.addEventListener('click', function() {
                enlargeImage(imageSrc);
            });
            
            const imagePlaceholder = document.createElement('div');
            imagePlaceholder.classList.add('image-placeholder');
            
            imageContainer.appendChild(imagePlaceholder);
            imageContainer.appendChild(image);
            
            image.onerror = () => {
                // Replace missing image with a backup image if available
                const missingImageBackupSrc = imageUrl + 'backup.png';
                image.src = missingImageBackupSrc;
            };

            gallery.appendChild(imageContainer);
        }
    }
}
        
        // Function to pad numbers with leading zeros
        function padNumberWithZero(number, length) {
            let numString = String(number);
            while (numString.length < length) {
                numString = '0' + numString;
            }
            return numString;
        }
        
        // Function to manually update the gallery
        function manualUpdate() {
            clearInterval(intervalId); // Stop auto-update if in progress
            currentRange = 1;
            rangeSlider.value = 1;
            updateGallery();
        }
        
        // Function to toggle auto-update
        function toggleAutoUpdate() {
            if (autoUpdateCheckbox.checked) {
                intervalId = setInterval(updateGallery, 5000); // Auto-update every 5 seconds
                updateButton.disabled = true;
            } else {
                clearInterval(intervalId);
                updateButton.disabled = false;
            }
        }

        // Function to update the range
        function updateRange(value) {
            currentRange = parseInt(value);
            updateGallery();
        }
        
        // Function to enlarge an image to full viewport
        function enlargeImage(imageSrc) {
            const fullscreenImage = new Image();
            fullscreenImage.src = imageSrc;
            fullscreenImage.classList.add('gallery-image');
            fullscreenImage.style.position = 'fixed';
            fullscreenImage.style.top = '0';
            fullscreenImage.style.left = '0';
            fullscreenImage.style.width = '100%';
            fullscreenImage.style.height = '100%';
            fullscreenImage.style.objectFit = 'contain';
            fullscreenImage.style.zIndex = '9999';
            fullscreenImage.style.cursor = 'pointer';
            fullscreenImage.addEventListener('click', function() {
                document.body.removeChild(fullscreenImage);
            });

            document.body.appendChild(fullscreenImage);
        }
        
        // Initial gallery update
        updateGallery();
    </script>
</body>
</html>