Ensure userbar dialog can sit above other website content

- Fixes #10471

CHANGELOG.txt

@@ -63,6 +63,7 @@ Changelog
  * Fix: Avoid N+1 queries in users index view (Tidiane Dia)
  * Fix: Use a theme-agnostic color token for read-only panels support in dark mode (Thibaud Colas)
  * Fix: Ensure collapsible StreamBlocks expand as necessary to show validation errors (Storm Heg)
+ * Fix: Ensure userbar dialog can sit above other website content (LB (Ben) Johnston)
  * Docs: Document how to add non-ModelAdmin views to a `ModelAdminGroup` (Onno Timmerman)
  * Docs: Document how to add StructBlock data to a StreamField (Ramon Wenger)
  * Docs: Update ReadTheDocs settings to v2 to resolve urllib3 issue in linkcheck extension (Thibaud Colas)

client/scss/components/_userbar.scss

@@ -12,6 +12,7 @@ $box-shadow-props: 0 0 1px 0 rgba(107, 214, 230, 1),
   0 1px 10px 0 rgba(107, 214, 230, 0.7);
 $max-items: 12;
 $userbar-radius: 6px;
+$userbar-z-index: 9999;
 
 // Possible positions for the userbar to exist in. These are set through the
 // {% wagtailuserbar 'bottom-left' %} template tag.
@@ -39,7 +40,7 @@ $positions: (
 // =============================================================================
 .w-userbar {
   position: fixed;
-  z-index: 9999;
+  z-index: $userbar-z-index;
   font-size: initial;
   line-height: initial;
   margin: 0;
@@ -246,6 +247,7 @@ $positions: (
   inset-inline-start: auto;
   font-family: $font-sans;
   padding-inline-end: 2rem;
+  z-index: $userbar-z-index;
 
   .w-dialog__close-button {
     $size: theme('spacing.6');

docs/releases/5.1.md

@@ -120,6 +120,7 @@ This feature was developed by Aman Pandey as part of the Google Summer of Code p
  * Avoid N+1 queries in users index view (Tidiane Dia)
  * Use a theme-agnostic color token for read-only panels support in dark mode (Thibaud Colas)
  * Ensure collapsible StreamBlocks expand as necessary to show validation errors (Storm Heg)
+ * Ensure userbar dialog can sit above other website content (LB (Ben) Johnston)
 
 ### Documentation