I'm building an autocomplete (enter text into an input, do a API call, show matching content in a drop down div). I've got it mostly working (I'm sure there are issues, but not too important for this question). In the context of the page I'm making, on a mobile view, there could potentially be enough rows containing these inputs where the drop down could be at the bottom of the screen, which if I'm correct, as an absolute object, could go below the viewport? Even if not, it would extend the view port, but you couldn't scroll down without closing the drop down if I set it to close when clicked outside (which I obviously would). I know in the future, we'll have anchor name to help with this problem, but how could I have the drop down appear above the element if it goes below the viewport? I feel like there's probably some math-y thing I could do in JS, but what that is isn't coming to me.

Hi everyone, I'm working on a welcome screen for a Laravel Blade project. I have an animated SVG (it draws itself and flickers with internal animations). What I want to achieve is: Initially, the SVG should appear centered on the screen, occupying most of the viewport (around 75%-85% of the size, as a “loading”). Let it fully complete its internal animation (drawing lines and flickering). After that, the SVG should smoothly move to the top-left corner and scale down to act like a small logo or button. I'm currently embedding the SVG directly into the Blade view (using file_get_contents()) and controlling the size and movement with JavaScript. Here’s a bit the code I'm using (if requested I can send other parts of the code, such as the one in layout, or what I am using for the base.blade. <x-app-layout> <x-self.base> <div class="relative w-screen h-screen overflow-hidden"> <div id="logo-container" class="absolute inset-0 flex items-center justify-center"> <div id="logo-svg" class="w-[90vw] h-auto"> {!! file_get_contents(public_path('storage/media/Gamora-gradient-faster.svg')) !!} </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const logoContainer = document.getElementById('logo-container'); const logoSvg = document.getElementById('logo-svg'); // Ajustar tamaño inicial al 75% de viewport function setInitialSize() { const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; const size = Math.min(screenWidth, screenHeight) * 0.50; logoSvg.style.width = size + 'px'; logoSvg.style.height = 'auto'; } setInitialSize(); window.addEventListener('resize', setInitialSize); // Esperamos 4 segundos para mover y escalar setTimeout(() => { logoContainer.style.transition = 'all 1.5s ease-in-out'; logoContainer.style.transformOrigin = 'top left'; logoContainer.style.transform = 'translate(5%, 5%) scale(0.2)'; }, 4000); // 4 segundos después }); </script> </x-self.base> </x-app-layout> The problem: I'm struggling to control the initial size properly (it doesn’t cover enough screen space) and later, when scaling down, it becomes way too small or moves awkwardly. Question: How would you structure this so that: The SVG is correctly centered and large on load, It smoothly moves to the top-left corner after its animation finishes (the 4 seconds await), And stays nicely visible and proportionate across different screen sizes? I'm open to using CSS, JavaScript, or any better approach! Thanks so much in advance! Extra: is there a way to do that when the svg moves to the top-left corner, the whole screen appears in like reverse fading? (I don’t know if I’m explaining myself correctly)