Fix long CI variable name overflows on origin

app/assets/stylesheets/framework/ci_variable_list.scss

@@ -98,13 +98,3 @@
     color: $gl-text-color-disabled;
   }
 }
-
-.group-variable-list {
-  color: $gray-500;
-
-  .table-section:not(:first-child) {
-    @include media-breakpoint-down(sm) {
-      border-top: hidden;
-    }
-  }
-}

app/views/ci/group_variables/_index.html.haml

 - variables = @project.group.self_and_ancestors.map(&:variables).flatten
 
-.row
-  .col-lg-12
-    .group-variable-list
-      = render 'ci/group_variables/variable_header'
-      - variables.each do |variable|
-        .group-variable-row.d-flex.w-100.border-bottom.pt-2.pb-2
-          .table-section.section-40.gl-mr-3.key
-            = variable.key
-          .table-section.section-40.gl-mr-3
-            %a.group-origin-link{ href: group_settings_ci_cd_path(variable.group) }
-              = variable.group.name
+.ci-variable-table
+  %table.gl-table.gl-w-full.gl-table-layout-fixed
+    = render 'ci/group_variables/variable_header'
+    - variables.each do |variable|
+      %tr
+        %td.gl-text-truncate
+          = variable.key
+        %td.gl-text-truncate
+          %a.group-origin-link{ href: group_settings_ci_cd_path(variable.group) }
+            = variable.group.name

app/views/ci/group_variables/_variable_header.html.haml

-.group-variable-keys.d-flex.w-100.align-items-center.pb-2.border-bottom
-  .bold.table-section.section-40.gl-mr-3
+%tr
+  %th
     = s_('Key')
-  .bold.table-section.section-40.gl-mr-3
+  %th
     = s_('Group')

changelogs/unreleased/258550-fix-long-ci-variable-name-overflows-on-origin.yml

+---
+title: Fix long CI variable name overflows on origin
+merge_request: 51021
+author: Kev @KevSlashNull
+type: fixed