Fix overflow of search results on mobile devices (docs)

- Fixes #9893

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Docs: Add new "Icons" page for icons customisation and reuse across the admin interface (Coen van der Kamp)
  * Docs: Fix broken formatting for MultiFieldPanel / FieldRowPanel permission kwarg docs (Matt Westcott)
  * Docs: Add helpful troubleshooting links and refine wording for getting started with development (Loveth Omokaro)
+ * Docs: Ensure search autocomplete overlay on mobile does not overflow the viewport (Ayman Makroo)
  * Maintenance: Removed features deprecated in Wagtail 3.0 and 4.0 (Matt Westcott)
  * Maintenance: Update djhtml (html formatting) library to v 1.5.2 (Loveth Omokaro)
  * Maintenance: Re-enable `strictPropertyInitialization` in tsconfig (Thibaud Colas)

CONTRIBUTORS.rst

@@ -689,6 +689,7 @@ Contributors
 * Aadi jindal
 * Satvik Vashisht
 * Rishabh Kumar Bahukhandi
+* Ayman Makroo
 
 Translators
 ===========

docs/_static/css/docsearch.overrides.css

@@ -28,3 +28,12 @@ a.algolia-docsearch-suggestion {
 body.theme-dark #search-form .algolia-autocomplete > .form-control {
   background: #1b1238 none repeat scroll 0% 0% padding-box !important;
 }
+
+/* override algolia search default styles to prevent overflow on mobile devices */
+
+@media (max-width: 991px) {
+  #algolia-autocomplete-listbox-0 {
+    width: auto;
+    min-width: 0;
+  }
+}

docs/releases/5.0.md

@@ -39,6 +39,7 @@ depth: 1
  * Add new "Icons" page for icons customisation and reuse across the admin interface (Coen van der Kamp)
  * Fix broken formatting for MultiFieldPanel / FieldRowPanel permission kwarg docs (Matt Westcott)
  * Add helpful troubleshooting links and refine wording for getting started with development (Loveth Omokaro)
+ * Ensure search autocomplete overlay on mobile does not overflow the viewport (Ayman Makroo)
 
 ### Maintenance