From 0214a12e31d812fb362d88f939c689ed0458eaa4 Mon Sep 17 00:00:00 2001
From: Hadley Wickham <h.wickham@gmail.com>
Date: Fri, 10 May 2024 09:34:12 -0500
Subject: [PATCH] Tweak mobile navbar display (#2517)

Fixes #2512
---
 NEWS.md                      |  1 +
 inst/BS5/assets/pkgdown.scss | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/NEWS.md b/NEWS.md
index a1c6cc2aa..1c520b344 100644
--- a/NEWS.md
+++ b/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).
diff --git a/inst/BS5/assets/pkgdown.scss b/inst/BS5/assets/pkgdown.scss
index 7e14ebc11..a86b46d21 100644
--- a/inst/BS5/assets/pkgdown.scss
+++ b/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 {