feat: Dynamically resize search drawer on mobile (#411)

| Full screen | With keyboard visible |
|----------|----------|
| <img width="1008" height="2007" alt="image"
src="https://github.com/user-attachments/assets/381fc87a-dac0-4f0b-b84b-d8db6971c294"
/> | <img width="1008" height="2003" alt="image"
src="https://github.com/user-attachments/assets/a3fd65f1-edd0-403a-84a2-11a128686b84"
/> |

---------

Co-authored-by: Robert Schuster <77234379+therobrob@users.noreply.github.com>

Author: MoritzWeber0

assets/js/search.js

@@ -27,6 +27,15 @@ const initSearch = () => {
     },
   });
 
+  // Close keyboard when scrolling in search results (mobile only)
+  const searchDrawer = search.querySelector(".pagefind-ui__drawer");
+  searchDrawer.addEventListener("scroll", () => {
+    if (!isMobile) return;
+    if (document.activeElement && document.activeElement.blur) {
+      document.activeElement.blur();
+    }
+  });
+
   const searchElement = search.querySelector("input");
 
   const closeSearch = () => {

assets/sass/search.scss

@@ -75,6 +75,10 @@
     z-index: 6;
     border: var(--border);
     border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
+
+    @media (max-width: #{$breakpoint-md}) {
+      max-height: calc(100dvh - 17rem);
+    }
   }
 
   .pagefind-ui__result {

layouts/partials/headMeta.html

@@ -3,7 +3,7 @@
 <meta name="dc.relation" content="{{ .Site.BaseURL }}" />
 <meta
   name="viewport"
-  content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+  content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover, interactive-widget=resizes-content"
 />
 <meta name="theme-color" content="#BA3D12" />
 <meta property="og:url" content="{{ .Permalink }}" />