From a1c48b49436dcdd50769972b6be73cd5c96a3dee Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 23 May 2025 16:14:12 +0800
Subject: [PATCH] fix: resolve text wrapping issue in StatusDot component
 (#7466)

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.21.x


#### What this PR does / why we need it:

before:

<img width="273" alt="image" src="https://github.com/user-attachments/assets/e1e21e33-6ead-4d47-b3f6-1b19fb0a8a96" />

after:

<img width="323" alt="image" src="https://github.com/user-attachments/assets/950023f8-6e71-4db4-97c4-9a3b2be6dffb" />


#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../contents/comments/components/CommentListItem.vue | 12 +++++-------
 .../contents/comments/components/ReplyListItem.vue   | 12 +++++-------
 .../components/src/components/status/StatusDot.vue   |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/ui/console-src/modules/contents/comments/components/CommentListItem.vue b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
index 87b1b94db..0faa19a69 100644
--- a/ui/console-src/modules/contents/comments/components/CommentListItem.vue
+++ b/ui/console-src/modules/contents/comments/components/CommentListItem.vue
@@ -421,13 +421,11 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
     <template #end>
       <VEntityField v-if="!comment?.comment.spec.approved">
         <template #description>
-          <VStatusDot state="success">
-            <template #text>
-              <span class="text-xs text-gray-500">
-                {{ $t("core.comment.list.fields.pending_review") }}
-              </span>
-            </template>
-          </VStatusDot>
+          <VStatusDot
+            state="warning"
+            animate
+            :text="$t('core.comment.list.fields.pending_review')"
+          />
         </template>
       </VEntityField>
       <VEntityField v-if="comment?.comment?.metadata.deletionTimestamp">
diff --git a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue
index 4aa0e1d71..b8c38787e 100644
--- a/ui/console-src/modules/contents/comments/components/ReplyListItem.vue
+++ b/ui/console-src/modules/contents/comments/components/ReplyListItem.vue
@@ -216,13 +216,11 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
     <template #end>
       <VEntityField v-if="!reply?.reply.spec.approved">
         <template #description>
-          <VStatusDot state="success">
-            <template #text>
-              <span class="text-xs text-gray-500">
-                {{ $t("core.comment.list.fields.pending_review") }}
-              </span>
-            </template>
-          </VStatusDot>
+          <VStatusDot
+            state="warning"
+            animate
+            :text="$t('core.comment.list.fields.pending_review')"
+          />
         </template>
       </VEntityField>
       <VEntityField v-if="reply?.reply.metadata.deletionTimestamp">
diff --git a/ui/packages/components/src/components/status/StatusDot.vue b/ui/packages/components/src/components/status/StatusDot.vue
index ddb79994b..af686be7f 100644
--- a/ui/packages/components/src/components/status/StatusDot.vue
+++ b/ui/packages/components/src/components/status/StatusDot.vue
@@ -40,7 +40,7 @@ const classes = computed(() => {
   }
 
   .status-dot-text {
-    @apply text-gray-500 text-xs;
+    @apply text-gray-500 text-xs whitespace-nowrap;
   }
 
   &.status-dot-animate {