From 80bd36d00d5c6a56893a5bdfd4c52ac7a975f751 Mon Sep 17 00:00:00 2001
From: Tobias Dillmann <github@pentokami.de>
Date: Mon, 9 Dec 2024 17:56:09 +0100
Subject: [PATCH] [#58160] fix visual glitch with leading icon in action button

---
 app/helpers/sort_helper.rb                             | 7 ++++++-
 app/models/queries/projects/selects/life_cycle_step.rb | 7 ++++++-
 frontend/src/global_styles/content/_table.sass         | 6 ++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/helpers/sort_helper.rb b/app/helpers/sort_helper.rb
index daf2c395ae0f..844c9a5b5679 100644
--- a/app/helpers/sort_helper.rb
+++ b/app/helpers/sort_helper.rb
@@ -417,9 +417,14 @@ def action_menu(column, table_columns, caption, default_order, filter_column_map
   end
 
   def action_button(menu, column, caption, favorite: false)
+    additional_menu_classes = ["generic-table--action-menu-button",
+                               column.respond_to?(:action_menu_classes) ? column.action_menu_classes : nil]
+                                .compact
+                                .join(" ")
+
     menu.with_show_button(scheme: :link, color: :default, text_transform: :uppercase,
                           underline: false, display: :inline_flex,
-                          classes: "generic-table--action-menu-button") do |button|
+                          classes: additional_menu_classes) do |button|
       if favorite
         # This column only shows an icon, no text.
         render Primer::Beta::Octicon.new(icon: "star-fill", color: :subtle, "aria-label": I18n.t(:label_favorite))
diff --git a/app/models/queries/projects/selects/life_cycle_step.rb b/app/models/queries/projects/selects/life_cycle_step.rb
index 3f9a405cbbec..a756695d4f46 100644
--- a/app/models/queries/projects/selects/life_cycle_step.rb
+++ b/app/models/queries/projects/selects/life_cycle_step.rb
@@ -61,7 +61,8 @@ def available?
   def action_menu_header(button)
     # Show the proper icon for the definition with the correct color.
     icon = life_cycle_step.is_a?(Project::StageDefinition) ? :"git-commit" : :diamond
-    button.with_leading_visual_icon(icon:, classes: helpers.hl_inline_class("life_cycle_step_definition", life_cycle_step))
+    classes = helpers.hl_inline_class("life_cycle_step_definition", life_cycle_step)
+    button.with_leading_visual_icon(icon:, classes:)
 
     # As all other action menu headers, we will show an action icon and the caption:
     button.with_trailing_action_icon(icon: :"triangle-down")
@@ -69,6 +70,10 @@ def action_menu_header(button)
     caption.to_s
   end
 
+  def action_menu_classes
+    "leading-visual-icon-header"
+  end
+
   private
 
   def helpers
diff --git a/frontend/src/global_styles/content/_table.sass b/frontend/src/global_styles/content/_table.sass
index aab02d6834d1..c3699bdbb48b 100644
--- a/frontend/src/global_styles/content/_table.sass
+++ b/frontend/src/global_styles/content/_table.sass
@@ -76,6 +76,7 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
     &.ng-leave
       @include animation(0.5s fade-out)
 
+
 table.generic-table
   border-collapse: collapse
   width:  100%
@@ -381,3 +382,8 @@ thead.-sticky th
 
   p:last-child
     margin-bottom: 0
+
+.generic-table
+  &--action-menu-button.leading-visual-icon-header
+    position: relative
+    top: 2px