feat: add mobile search dialog box and styling

Signed-off-by: Mike Fiedler <[email protected]>

Author: miketheman

pep_sphinx_extensions/pep_theme/static/mq.css

@@ -17,6 +17,10 @@
     nav#pep-sidebar {
         display: none;
     }
+    /* Show mobile search container on small screens */
+    .mobile-search-container {
+        display: block;
+    }
     pre {
         font-size: 0.8175rem;
     }
@@ -46,6 +50,10 @@
         float: left;
         margin-right: 2%;
     }
+    /* Hide mobile search container on larger screens */
+    .mobile-search-container {
+        display: none;
+    }
   /* Make less prominent when sidebar ToC is available */
   details > summary {
       font-size: 1rem;

pep_sphinx_extensions/pep_theme/templates/page.html

@@ -46,6 +46,8 @@ <h1>Python Enhancement Proposals</h1>
                 <span class="visually-hidden">Toggle light / dark / auto colour theme</span>
             </button>
         </header>
+        {# Mobile search box - visible only on small screens #}
+        <div id="mobile-search" class="mobile-search-container"></div>
         <article data-pagefind-body>
             {# Add pagefind meta for the title to improve search result display #}
             <div data-pagefind-meta="title:{{ title }}" style="display:none;"></div>
@@ -73,6 +75,12 @@ <h2>Contents</h2>
         window.addEventListener('DOMContentLoaded', (event) => {
             // Initialize pagefind for desktop sidebar
             new PagefindUI({ element: "#search", showSubResults: true });
+
+            // Initialize pagefind for mobile view
+            const mobileSearch = document.getElementById('mobile-search');
+            if (mobileSearch && window.innerWidth <= 640) {
+                new PagefindUI({ element: "#mobile-search", showSubResults: false });
+            }
         });
     </script>
 </body>