fix: smaller screen view and search for mobile views

doc/changelog.d/689.fixed.md

@@ -0,0 +1 @@
+smaller screen view and search for mobile views

src/ansys_sphinx_theme/assets/styles/ast-search.scss

@@ -1,4 +1,8 @@
 /* Static Search Results Container */
+
+.bd-search{
+  display: flex;
+}
 .static-search-results {
   display: flex;
   flex-direction: column;
@@ -81,10 +85,6 @@ html[data-theme="light"] .highlight {
 .bd-search .search-button__kbd-shortcut {
   background-color: var(--ast-search-bar-enable-background) !important;
   box-shadow: none !important;
-  height: 2.25rem; /* 36px */
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
 }
 
 /* Index Select Dropdown */
@@ -150,20 +150,54 @@ html[data-theme="light"] .highlight {
 }
 
 /* Responsive Styles */
-@media (max-width: 48rem) { /* 768px */
-  .bd-search input.expanded {
-    width: 6.25rem; /* 100px */
+@media (min-width: 64rem) and (max-width: 85.375rem) {
+  .bd-search input.form-control.expanded {
+    width: 100%; /* 320px */
+  }
+
+  .bd-search input.form-control {
+    width: 100%; /* 240px */
+  }
+
+  .bd-search .search-button__kbd-shortcut {
+    display: none !important;
+  }
+
+  .static-search-results {
+    width: 30%; /* 480px */
+  }
+}
+
+@media (max-width: 64rem) {
+
+  .bd-search input.form-control.expanded {
+    width: 100%; /* 320px */
   }
 
-  .form-control {
-    width: 3.125rem; /* 50px */
+  .bd-search input.form-control {
+    width: 100%; /* 240px */
   }
 
-  .result {
-    width: 6.25rem; /* 100px */
+  .static-search-results {
+    width: 30%; /* 480px */
   }
 
   .bd-search .search-button__kbd-shortcut {
-    display: none;
+    display: none !important;
+  }
+}
+
+// laptop
+@media (min-width: 85.375rem)  and (max-width: 128rem) {
+  .bd-search input.form-control.expanded {
+    width: 35rem; /* 560px */
+  }
+
+  .bd-search input.form-control {
+    width: 100%; /* 240px */
+  }
+
+  .static-search-results {
+    width: 37rem; /* 600px */
   }
 }

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/search-button-field.html

@@ -1,5 +1,5 @@
 
-<div class="search-bar pst-js-only" id="search-bar">
+<div class="search-bar" id="search-bar">
   <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
     <i class="fa-solid fa-magnifying-glass"></i>
     <input type="search" class="form-control" name="q" placeholder="{{ theme_search_bar_text }}"

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/search.js

@@ -1,6 +1,30 @@
-const SEARCH_BAR = document.getElementById("search-bar");
-const SEARCH_INPUT = SEARCH_BAR.querySelector(".bd-search input.form-control");
-const RESULTS = document.getElementById("static-search-results");
+// Determine which search bar to use (mobile or desktop)
+let SEARCH_BAR;
+
+if (window.innerWidth < 960) {
+  SEARCH_BAR = document.querySelector(".navbar-persistent--mobile #search-bar");
+} else {
+  SEARCH_BAR = document.getElementById("search-bar");
+}
+
+// Fallback if nothing is found
+if (!SEARCH_BAR) {
+  console.warn("SEARCH_BAR not found for current view.");
+}
+
+// Get input and results area
+
+const SEARCH_INPUT = SEARCH_BAR?.querySelector(".bd-search input.form-control");
+
+let RESULTS;
+if (window.innerWidth < 960) {
+  RESULTS = document.querySelector(
+    ".navbar-persistent--mobile .static-search-results",
+  );
+} else {
+  RESULTS = document.querySelector(".static-search-results");
+}
+
 const MAIN_PAGE_CONTENT = document.querySelector(".bd-main");
 let CURRENT_INDEX = -1;
 
@@ -144,7 +168,6 @@ require(["fuse"], function (Fuse) {
     searchingBanner.className = "searching-banner";
     searchingBanner.textContent = "Searching...";
     searchingBanner.style.display = "block";
-    console.log("Searching...");
     searchingBanner.style.fontStyle = "italic";
     RESULTS.appendChild(searchingBanner);
   }
@@ -248,7 +271,6 @@ require(["fuse"], function (Fuse) {
     }
   }
 
-  // Add event listeners
   SEARCH_INPUT.addEventListener("click", expandSearchInput);
   SEARCH_INPUT.addEventListener("keydown", handleKeyDownSearchInput);
   document.addEventListener("keydown", handleGlobalKeyDown);