Ensure that dropdown content will be scrollable if content is too high

Fixes #11108

CHANGELOG.txt

@@ -28,6 +28,7 @@ Changelog
  * Fix: Ensure form builder emails that have date or datetime fields correctly localize dates based on the configured `LANGUAGE_CODE` (Mark Niehues)
  * Fix: Ensure the Stimulus `UnsavedController` checks for nested removal/additions of inputs so that the unsaved warning shows in more valid cases when editing a page (Karthik Ayangar)
  * Fix: Ensure `get_add_url()` is always used to re-render the add button when the listing is refreshed in viewsets (Sage Abdullah)
+ * Fix: Ensure dropdown content cannot get higher than the viewport and add scrolling within content if needed (Chiemezuo Akujobi)
  * Docs: Add contributing development documentation on how to work with a fork of Wagtail (Nix Asteri, Dan Braghis)
  * Docs: Make sure the settings panel is listed in tabbed interface examples (Tibor Leupold)
  * Docs: Update content and page names to their US spelling instead of UK spelling (Victoria Poromon)

client/scss/components/_dropdown.scss

@@ -12,6 +12,8 @@
 
 .w-dropdown__content {
   @apply w-flex w-flex-col w-justify-start w-py-2;
+  max-height: 50vh;
+  overflow-y: auto;
 }
 
 .w-dropdown__content :where(a, button) {

docs/releases/6.1.md

@@ -41,6 +41,7 @@ depth: 1
  * Ensure form builder emails that have date or datetime fields correctly localize dates based on the configured `LANGUAGE_CODE` (Mark Niehues)
  * Ensure the Stimulus `UnsavedController` checks for nested removal/additions of inputs so that the unsaved warning shows in more valid cases when editing a page (Karthik Ayangar)
  * Ensure `get_add_url()` is always used to re-render the add button when the listing is refreshed in viewsets (Sage Abdullah)
+ * Ensure dropdown content cannot get higher than the viewport and add scrolling within content if needed (Chiemezuo Akujobi)
 
 
 ### Documentation