dynamically moving buttons for main page

templates/search.html

@@ -126,7 +126,7 @@
                 </g>
                 </svg>
             </div>
-            <div class="wrapper">
+            <div class="wrapper custom-search-page">
                 <input type="text" name="q" autofocus id="search-input"/>
                 <button id="search-wrapper-ico" class="material-icons-round" name="t" value="web" type="submit">search</button>
                 <div class="autocomplete">
@@ -170,6 +170,44 @@
     </form>
 
     <!-- JavaScript Functions -->
+    <script>
+document.addEventListener('DOMContentLoaded', () => {
+    const customSearchWrapper = document.querySelector('.wrapper.custom-search-page');
+    const searchTypeIcons = document.querySelector('.search-type-icons');
+    const resultsWrapper = document.querySelector('.wrapper.custom-search-page .autocomplete');
+
+    // Check if we are on the correct page
+    if (customSearchWrapper && resultsWrapper) {
+
+        // Function to move buttons without affecting the page flow
+        function adjustSearchIconsPosition() {
+            const autocompleteHeight = resultsWrapper.offsetHeight;
+            if (autocompleteHeight > 0) {
+                // Use transform to move the buttons down
+                searchTypeIcons.style.transform = `translateY(${autocompleteHeight + 20}px)`;
+            } else {
+                // Reset the buttons position when no suggestions
+                searchTypeIcons.style.transform = 'translateY(0)';
+            }
+        }
+
+        // Observer to detect changes in the autocomplete content and adjust position
+        const observer = new MutationObserver(() => {
+            adjustSearchIconsPosition();
+        });
+
+        // Start observing the autocomplete for content changes
+        observer.observe(resultsWrapper, { childList: true, subtree: true });
+
+        // Optionally adjust when window resizes (for responsive changes)
+        window.addEventListener('resize', adjustSearchIconsPosition);
+
+        // Adjust initially on load in case suggestions are already present
+        adjustSearchIconsPosition();
+    }
+});
+
+    </script>
     <script>
         function openNav() {
             document.getElementById("mySidenav").style.width = "250px";