github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

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
```
pull/7470/head
Ryan Wang 2025-05-23 16:14:12 +08:00 committed by GitHub
parent 3df117511c
commit a1c48b4943
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/console-src/modules/contents/comments/components/CommentListItem.vue
View File

@ -421,13 +421,11 @@ const { operationItems } = useOperationItemExtensionPoint<ListedComment>(
<template #end> <template #end>
<VEntityField v-if="!comment?.comment.spec.approved"> <VEntityField v-if="!comment?.comment.spec.approved">
<template #description> <template #description>
<VStatusDot state="success"> <VStatusDot
<template #text> state="warning"
<span class="text-xs text-gray-500"> animate
{{ $t("core.comment.list.fields.pending_review") }} :text="$t('core.comment.list.fields.pending_review')"
</span> />
</template>
</VStatusDot>
</template> </template>
</VEntityField> </VEntityField>
<VEntityField v-if="comment?.comment?.metadata.deletionTimestamp"> <VEntityField v-if="comment?.comment?.metadata.deletionTimestamp">

12
ui/console-src/modules/contents/comments/components/ReplyListItem.vue
View File

@ -216,13 +216,11 @@ const { operationItems } = useOperationItemExtensionPoint<ListedReply>(
<template #end> <template #end>
<VEntityField v-if="!reply?.reply.spec.approved"> <VEntityField v-if="!reply?.reply.spec.approved">
<template #description> <template #description>
<VStatusDot state="success"> <VStatusDot
<template #text> state="warning"
<span class="text-xs text-gray-500"> animate
{{ $t("core.comment.list.fields.pending_review") }} :text="$t('core.comment.list.fields.pending_review')"
</span> />
</template>
</VStatusDot>
</template> </template>
</VEntityField> </VEntityField>
<VEntityField v-if="reply?.reply.metadata.deletionTimestamp"> <VEntityField v-if="reply?.reply.metadata.deletionTimestamp">

2
ui/packages/components/src/components/status/StatusDot.vue
View File

@ -40,7 +40,7 @@ const classes = computed(() => {
} }
.status-dot-text { .status-dot-text {
@apply text-gray-500 text-xs; @apply text-gray-500 text-xs whitespace-nowrap;
} }
&.status-dot-animate { &.status-dot-animate {