From 475c231c6f495b7fa8aa984e2e2d9b30b6261e85 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 20 Jan 2025 07:43:39 -0800
Subject: [PATCH] Fix: fix long tag visual wrapping (#8833)

---
 .../src/app/components/common/input/tags/tags.component.html  | 2 +-
 src-ui/src/app/components/common/tag/tag.component.scss       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index d5d5c4a7d..23c680dd0 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -17,7 +17,7 @@
           (change)="onChange(value)">
 
           <ng-template ng-label-tmp let-item="item">
-            <button class="tag-wrap btn p-0" (click)="removeTag($event, item.id)" title="Remove tag" i18n-title>
+            <button class="tag-wrap btn p-0 d-flex align-items-center" (click)="removeTag($event, item.id)" title="Remove tag" i18n-title>
               <i-bs name="x" style="margin-inline-end: 1px;"></i-bs>
               @if (item.id && tags) {
                 <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
diff --git a/src-ui/src/app/components/common/tag/tag.component.scss b/src-ui/src/app/components/common/tag/tag.component.scss
index 3de7e7f13..5dc28b65f 100644
--- a/src-ui/src/app/components/common/tag/tag.component.scss
+++ b/src-ui/src/app/components/common/tag/tag.component.scss
@@ -1,8 +1,8 @@
-a {
+a, span {
     cursor: pointer;
     white-space: normal;
     word-break: break-word;
-    text-align: end;
+    text-align: start;
 }
 
 .private {