z-index of vertical divider for gl-modal non-first button is too high, overlaps other UI elements

The styles at src/components/base/button_group/button_group.scss:28 and following specify an absolutely positioned vertical line that will form the border between two buttons. However, the specified z-index is too high.

This causes the vertical line to overlap other fixed- or sticky-positioned UI elements, as you can see from the Create merge request button on a work item:

Screen_Recording_2025-03-24_at_16.47.44

Applying isolation: isolate; to the button itself seems to be a sufficient and safe fix for this. Something like

diff --git a/src/components/base/button_group/button_group.scss b/src/components/base/button_group/button_group.scss
index a7224f39b..ccd21f476 100644
--- a/src/components/base/button_group/button_group.scss
+++ b/src/components/base/button_group/button_group.scss
@@ -23,7 +23,7 @@ $gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
   > .gl-button:not(:first-child),
   > .btn-group:not(:first-child) > .gl-button,
   > .gl-new-dropdown:not(:first-child) > .gl-button {
-    @apply gl-relative gl-ml-[1px];
+    @apply gl-relative gl-ml-[1px] gl-isolate;
 
     &::before {
       content: '';