pdf view scroll bar removal and tools scrolling on wide screens fix

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;

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) {
+    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.
         e.preventDefault();
-    }
+        const isOpen = dropdownMenu.classList.contains('show');
-});
+        // Close all other open dropdowns
-
+        document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach((menu) => {
-// Handle hover for desktop
+            if (menu !== dropdownMenu) {
-searchDropdown.addEventListener('mouseenter', function () {
+                const parentDropdown = menu.closest('.dropdown');
-    if (window.innerWidth >= 1200) {
+                if (parentDropdown) {
-        showSearchDropdown();
+                    const parentToggle = parentDropdown.querySelector('[data-bs-toggle="dropdown"]');
-    }
+                    if (parentToggle) {
-});
+                        let instance = bootstrap.Dropdown.getInstance(parentToggle);
-
+                        if (!instance) {
-// Handle mouse leave for desktop
+                            instance = new bootstrap.Dropdown(parentToggle);
-searchDropdown.addEventListener('mouseleave', function (e) {
+                        }
-    if (window.innerWidth >= 1200) {
+                        instance.hide();
-        // 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();
             }
-        }, 200);
+        });
-    }
+        if (!isOpen) {
-});
+            dropdownInstance.show();
-
+            setTimeout(() => searchInput.focus(), 150);
-// Hide dropdown if it's open and user clicks outside
+        } else {
-document.addEventListener('click', function(e) {
+            dropdownInstance.hide();
-    const dropdownMenu = searchDropdown.querySelector('.dropdown-menu');
-    if (!searchDropdown.contains(e.target) && dropdownMenu && dropdownMenu.classList.contains('show')) {
-        if (searchInput.value.trim().length === 0) {
-             dropdownInstance.hide();
         }
-    }
+    });
-});
 
-// Keep dropdown open if search input is clicked
+    // Hide dropdown if it's open and user clicks outside
-searchInput.addEventListener('click', function (e) {
+    document.addEventListener('click', function(e) {
-    e.stopPropagation();
+        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();
+    });
+
+}

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>

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">