From 42f2a84c14e392c09e2cfc085534934f9fd8784f Mon Sep 17 00:00:00 2001
From: Ethan <ethan@MacBook-Pro.local>
Date: Mon, 14 Jul 2025 18:30:01 +0100
Subject: [PATCH] pdf view scroll bar removal and tools scrolling on wide
 screens fix

---
 .../src/main/resources/static/css/navbar.css  | 11 ++-
 .../src/main/resources/static/js/search.js    | 97 +++++++------------
 .../resources/templates/fragments/navbar.html | 10 +-
 .../main/resources/templates/view-pdf.html    |  2 +-
 4 files changed, 52 insertions(+), 68 deletions(-)

diff --git a/stirling-pdf/src/main/resources/static/css/navbar.css b/stirling-pdf/src/main/resources/static/css/navbar.css
index d2e69db87..eb5de45fc 100644
--- a/stirling-pdf/src/main/resources/static/css/navbar.css
+++ b/stirling-pdf/src/main/resources/static/css/navbar.css
@@ -206,9 +206,17 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
 @media (min-width: 1200px) {
   .lang-dropdown-item-wrapper .dropdown-item {
     min-width: 200px
-  }
 }
 
+.scroll-lock-y {
+  overflow-y: auto;
+  max-height: 80vh;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+}
+}
+
+
 .dropdown-item .icon-text {
   text-wrap: wrap;
   word-break: break-word;
@@ -461,6 +469,7 @@ html[dir="rtl"] .dropdown-menu {
   box-shadow: var(--md-sys-elevation-2);
 }
 
+
 .dropdown-menu-tp {
   color: transparent;
   background-color: transparent;
diff --git a/stirling-pdf/src/main/resources/static/js/search.js b/stirling-pdf/src/main/resources/static/js/search.js
index 0245369a5..277d722a9 100644
--- a/stirling-pdf/src/main/resources/static/js/search.js
+++ b/stirling-pdf/src/main/resources/static/js/search.js
@@ -90,72 +90,47 @@ const searchInput = document.getElementById('navbarSearchInput');
 if (searchDropdown && searchInput) {
     const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
 
-    // Create a single dropdown instance
+        // Create a single dropdown instance
     const dropdownInstance = new bootstrap.Dropdown(searchDropdown);
 
-// Function to handle showing the dropdown
-function showSearchDropdown() {
-    const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
-    if (!dropdownMenu || !dropdownMenu.classList.contains('show')) {
-        dropdownInstance.show();
-    }
-    setTimeout(() => searchInput.focus(), 150); // Focus after animation
-}
-
 // Handle click for mobile
-searchDropdown.addEventListener('click', function (e) {
-    if (window.innerWidth < 1200) {
-        // Let Bootstrap's default toggling handle it, but ensure focus
-        const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
-        if (!dropdownMenu || !dropdownMenu.classList.contains('show')) {
-            // Use a small delay to allow the dropdown to open before focusing
-            setTimeout(() => searchInput.focus(), 150);
-        }
-    } else {
-        // On desktop, hover opens the dropdown, so a click shouldn't toggle it.
+    searchDropdown.addEventListener('click', function (e) {
         e.preventDefault();
-    }
-});
-
-// Handle hover for desktop
-searchDropdown.addEventListener('mouseenter', function () {
-    if (window.innerWidth >= 1200) {
-        showSearchDropdown();
-    }
-});
-
-// Handle mouse leave for desktop
-searchDropdown.addEventListener('mouseleave', function (e) {
-    if (window.innerWidth >= 1200) {
-        // A short delay to allow moving mouse from button to menu
-        setTimeout(() => {
-            const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
-            if (!dropdownMenu) return;
-
-            // Check if either the button or the menu is still hovered
-            const isHoveringButton = searchDropdown.matches(':hover');
-            const isHoveringMenu = dropdownMenu.matches(':hover');
-
-            if (!isHoveringButton && !isHoveringMenu && searchInput.value.trim().length === 0) {
-                dropdownInstance.hide();
+        const isOpen = dropdownMenu.classList.contains('show');
+        // Close all other open dropdowns
+        document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach((menu) => {
+            if (menu !== dropdownMenu) {
+                const parentDropdown = menu.closest('.dropdown');
+                if (parentDropdown) {
+                    const parentToggle = parentDropdown.querySelector('[data-bs-toggle="dropdown"]');
+                    if (parentToggle) {
+                        let instance = bootstrap.Dropdown.getInstance(parentToggle);
+                        if (!instance) {
+                            instance = new bootstrap.Dropdown(parentToggle);
+                        }
+                        instance.hide();
+                    }
+                }
             }
-        }, 200);
-    }
-});
-
-// Hide dropdown if it's open and user clicks outside
-document.addEventListener('click', function(e) {
-    const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
-    if (!searchDropdown.contains(e.target) && dropdownMenu && dropdownMenu.classList.contains('show')) {
-        if (searchInput.value.trim().length === 0) {
-             dropdownInstance.hide();
+        });
+        if (!isOpen) {
+            dropdownInstance.show();
+            setTimeout(() => searchInput.focus(), 150);
+        } else {
+            dropdownInstance.hide();
         }
-    }
-});
+    });
 
-// Keep dropdown open if search input is clicked
-searchInput.addEventListener('click', function (e) {
-    e.stopPropagation();
-});
+    // Hide dropdown if it's open and user clicks outside
+    document.addEventListener('click', function(e) {
+        if (!searchDropdown.contains(e.target) && dropdownMenu.classList.contains('show')) {
+            dropdownInstance.hide();
+        }
+    });
 
-} // End of if (searchDropdown && searchInput) block
+    // Keep dropdown open if search input is clicked
+    searchInput.addEventListener('click', function (e) {
+        e.stopPropagation();
+    });
+
+}
diff --git a/stirling-pdf/src/main/resources/templates/fragments/navbar.html b/stirling-pdf/src/main/resources/templates/fragments/navbar.html
index 15f1974b8..773810a5a 100644
--- a/stirling-pdf/src/main/resources/templates/fragments/navbar.html
+++ b/stirling-pdf/src/main/resources/templates/fragments/navbar.html
@@ -48,7 +48,7 @@
               <span class="material-symbols-rounded chevron-icon">expand_more</span>
             </a>
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="navbarDropdown-1">
-              <div class="dropdown-menu-wrapper" style="max-width: 95vw !important;">
+              <div class="dropdown-menu-wrapper scroll-lock-y" style="max-width: 95vw !important;">
                 <div class="feature-rows">
 
                   <th:block th:insert="~{fragments/navElements.html :: navElements}"></th:block>
@@ -121,7 +121,7 @@
               <span class="material-symbols-rounded chevron-icon">expand_more</span>
             </a>
             <div class="dropdown-menu dropdown-menu-tp dropdown-mw-28" role="menu" aria-labelledby="navbarDropdown-5">
-              <div class="dropdown-menu-wrapper px-xl-2 px-2" id="favoritesDropdown" style="max-width: 95vw !important; ">
+              <div class="dropdown-menu-wrapper px-xl-2 px-2 scroll-lock-y" id="favoritesDropdown" style="max-width: 95vw !important; ">
                 <!-- Dropdown items will be added here by JavaScript -->
               </div>
             </div>
@@ -145,7 +145,7 @@
               <span class="material-symbols-rounded chevron-icon">expand_more</span>
             </a>
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="languageDropdown">
-              <div class="dropdown-menu-wrapper px-xl-2 px-2" style="max-width: 95vw !important;">
+              <div class="dropdown-menu-wrapper px-xl-2 px-2 scroll-lock-y" style="max-width: 95vw !important;">
                 <div id="languageSelection" class="scrollable-y lang_dropdown-mw scalable-languages-container">
                   <th:block th:insert="~{fragments/languages :: langs}"></th:block>
                 </div>
@@ -163,13 +163,13 @@
               <span class="material-symbols-rounded chevron-icon">expand_more</span>
             </a>
             <div class="dropdown-menu dropdown-menu-tp" aria-labelledby="searchDropdown">
-              <div class="dropdown-menu-wrapper px-xl-2 px-2" style="max-width: 95vw !important;">
+              <div class="dropdown-menu-wrapper px-xl-2 px-2 scroll-lock-y" style="max-width: 95vw !important;">
                 <form th:action="@{''}" class="d-flex p-2 search-form" id="searchForm">
                   <input class="form-control search-input" type="search" th:placeholder="#{navbar.search}"
                     aria-label="Search" id="navbarSearchInput">
                 </form>
                 <!-- Search Results -->
-                <div id="searchResults" class="search-results scrollable-y dropdown-mw-20"></div>
+                <div id="searchResults" class="search-results scroll-lock-y dropdown-mw-20"></div>
               </div>
             </div>
           </li>
diff --git a/stirling-pdf/src/main/resources/templates/view-pdf.html b/stirling-pdf/src/main/resources/templates/view-pdf.html
index 31154eb55..a50b362a2 100644
--- a/stirling-pdf/src/main/resources/templates/view-pdf.html
+++ b/stirling-pdf/src/main/resources/templates/view-pdf.html
@@ -41,7 +41,7 @@ See https://github.com/adobe-type-tools/cmap-resources
   <script th:src="@{'/pdfjs-legacy/js/viewer.mjs'}" type="module"></script>
 </head>
 
-<body tabindex="1">
+<body tabindex="1" style="overflow: hidden;">
   <th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
   <div id="outerContainer">
     <div id="sidebarContainer">