From 8731ea4bbbbdd6f9b147a8ef5305679c22bd0fb9 Mon Sep 17 00:00:00 2001
From: okxint <130782884+okxint@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:14:15 +0530
Subject: [PATCH] fix(actions): align status icon span for Safari rendering
 (#38558)

Fixes #38553

The `<span>` wrapping the SVG in `ActionStatusIcon.vue` had no explicit
display or alignment styles. Safari computes baseline alignment for
inline spans differently from Chrome/Firefox, causing the icon to shift
vertically in the action matrix build status list.

**Fix:** make it inline-flex

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/components/ActionStatusIcon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/components/ActionStatusIcon.vue b/web_src/js/components/ActionStatusIcon.vue
index bebb510467b..e5f42a5ab57 100644
--- a/web_src/js/components/ActionStatusIcon.vue
+++ b/web_src/js/components/ActionStatusIcon.vue
@@ -28,7 +28,7 @@ const iconClass = computed(() => {
 </script>
 
 <template>
-  <span :data-tooltip-content="localeStatus ?? status" v-if="status">
+  <span class="flex-text-inline" :data-tooltip-content="localeStatus ?? status" v-if="status">
     <SvgIcon :name="icon.name" :class="iconClass" :size="size"/>
   </span>
 </template>