From 048277483bff0a4cdf7ae583e399aa66a4a21bac Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Mon, 21 Jul 2025 13:06:21 +0100
Subject: [PATCH] Fix search scroll bar issue on navbar  (#3998)

Limit mobile drop downs to 1/3 screen height

Closes #3996

### UI Changes (

<img width="1541" height="1251"
alt="{5866A763-EE40-4E8B-B186-8FD28927F053}"
src="https://github.com/user-attachments/assets/deb1ca76-54df-4cb5-9662-471c914a9f8e"
/>
<img width="546" height="1008"
alt="{9395DF85-6FE0-4359-AA81-A657AC17DF15}"
src="https://github.com/user-attachments/assets/b67ce1c0-5736-4efe-9927-eedf1892e5f9"
/>

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
---
 app/core/src/main/resources/static/css/navbar.css     | 11 +++++++----
 .../main/resources/templates/fragments/navbar.html    |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/core/src/main/resources/static/css/navbar.css b/app/core/src/main/resources/static/css/navbar.css
index 047957b6d..20cd19176 100644
--- a/app/core/src/main/resources/static/css/navbar.css
+++ b/app/core/src/main/resources/static/css/navbar.css
@@ -251,6 +251,13 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
   border-left: 2px solid var(--md-nav-color-on-separator);
 }
 
+.scroll-lock-y {
+  overflow-y: auto;
+  max-height: 30vh;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* Responsive adjustments */
 @media (min-width: 1200px) {
   .lang-dropdown-item-wrapper .dropdown-item {
@@ -258,14 +265,10 @@ html[dir="rtl"] .lang-dropdown-item-wrapper {
 }
 
 .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;
diff --git a/app/core/src/main/resources/templates/fragments/navbar.html b/app/core/src/main/resources/templates/fragments/navbar.html
index 773810a5a..e5aea9345 100644
--- a/app/core/src/main/resources/templates/fragments/navbar.html
+++ b/app/core/src/main/resources/templates/fragments/navbar.html
@@ -163,7 +163,7 @@
               <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 scroll-lock-y" style="max-width: 95vw !important;">
+              <div class="dropdown-menu-wrapper px-xl-2 px-2" 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">