Tweak mobile navbar display (r-lib#2517)

Fixes r-lib#2512

NEWS.md

@@ -1,5 +1,6 @@
 # pkgdown (development version)
 
+* Tweaked navbar display on mobile so that long titles in drop downs (e.g. article titles) are now wrapped, and the search input spans the full width (#2512).
 * `build_reference()` now supports `\Sexpr[results=verbatim]` (@bastistician, #2510).
 * `build_home()` no longer checks if the README is missing any images. This check is now performed in `build_site()`, after `build_articles()` so you can refer to images created by vignettes with warnings (#2194).
 * `build_home()` now includes the contents of `inst/AUTHORS` on the authors page (#2506).

inst/BS5/assets/pkgdown.scss

@@ -60,6 +60,22 @@ input[type="search"] {
   width: 12rem;
 }
 
+// When navbar is a dropdown:
+@include media-breakpoint-down(lg) {
+  // Make search and sub-menus span full width
+  .algolia-autocomplete, input[type="search"], #navbar .dropdown-menu {
+    width: 100%;
+  }
+  // Allow text to wrap
+  #navbar .dropdown-item {
+    white-space: normal;
+  }
+  // Add a little margin
+  input[type="search"] {
+    margin: 0.25rem 0;
+  }
+}
+
 /* headroom.js -------------------------------------------------------------- */
 
 .headroom {