From 575be6595633c2f1ce33146e99ddcaadb0261664 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 13 Jun 2025 15:02:50 +0530
Subject: [PATCH] fix: asterisk is not visible if label is big enough

(cherry picked from commit 4edfa951dcd30501d5608dac0eee20712781c9e1)
---
 frontend/src/components/SidePanelLayout.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index b9512b46..e99d9725 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -44,18 +44,21 @@
                   >
                     <Tooltip :text="__(field.label)" :hoverDelay="1">
                       <div
-                        class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
+                        class="w-[35%] min-w-20 shrink-0 flex items-center gap-0.5"
                       >
-                        {{ __(field.label) }}
-                        <span
+                        <div class="truncate text-sm text-ink-gray-5">
+                          {{ __(field.label) }}
+                        </div>
+                        <div
                           v-if="
                             field.reqd ||
                             (field.mandatory_depends_on &&
                               field.mandatory_via_depends_on)
                           "
                           class="text-ink-red-2"
-                          >*</span
                         >
+                          *
+                        </div>
                       </div>
                     </Tooltip>
                     <div class="flex items-center justify-between w-[65%]">