Prevent long variable names from overflowing the popover in CI/CD settings

app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue

@@ -38,7 +38,9 @@ export default {
 <template>
   <div id="popover-container">
     <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
-      <div class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
+      <div
+        class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-word-break-all"
+      >
         <div class="ci-popover-value gl-pr-3">
           {{ displayValue }}
         </div>

changelogs/unreleased/fix-ci-variable-popover-copy-button.yml

+---
+title: Prevent long variable names from overflowing the popover in CI/CD settings
+merge_request: 51018
+author: Kev @KevSlashNull
+type: fixed