From 381c3e24841e70b377c5670d5f0fd1f462e0d4f5 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 13 Feb 2023 16:30:20 +0800
Subject: [PATCH] perf: improve word-break style for comment content (#852)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement

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

修复评论管理中内容文字过长导致样式异常的问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3294

#### Screenshots:

before:

<img width="1016" alt="image" src="https://user-images.githubusercontent.com/21301288/218379816-73a39f13-32f7-40a8-a65d-9e7f6f691f71.png">

after:

<img width="1416" alt="image" src="https://user-images.githubusercontent.com/21301288/218379719-f86193c0-d6d7-4aa6-ad5c-d538c215e80b.png">

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


```release-note
修复 Console 的评论管理中内容文字过长导致样式异常的问题。
```
---
 .../contents/comments/components/CommentListItem.vue        | 4 ++--
 src/modules/contents/comments/components/ReplyListItem.vue  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/contents/comments/components/CommentListItem.vue b/src/modules/contents/comments/components/CommentListItem.vue
index 806a2a37..fa0d750f 100644
--- a/src/modules/contents/comments/components/CommentListItem.vue
+++ b/src/modules/contents/comments/components/CommentListItem.vue
@@ -308,10 +308,10 @@ const subjectRefResult = computed(() => {
         :title="comment?.owner?.displayName"
         :description="comment?.owner?.email"
       ></VEntityField>
-      <VEntityField>
+      <VEntityField width="60%">
         <template #description>
           <div class="flex flex-col gap-2">
-            <div class="text-sm text-gray-900">
+            <div class="break-all text-sm text-gray-900">
               {{ comment?.comment?.spec.content }}
             </div>
             <div class="flex items-center gap-3 text-xs">
diff --git a/src/modules/contents/comments/components/ReplyListItem.vue b/src/modules/contents/comments/components/ReplyListItem.vue
index 2dd9e71d..d6670158 100644
--- a/src/modules/contents/comments/components/ReplyListItem.vue
+++ b/src/modules/contents/comments/components/ReplyListItem.vue
@@ -122,11 +122,11 @@ const isHoveredReply = computed(() => {
         :title="reply?.owner.displayName"
         :description="reply?.owner.email"
       ></VEntityField>
-      <VEntityField>
+      <VEntityField width="60%">
         <template #description>
           <div class="flex flex-col gap-2">
-            <div class="w-96 text-sm text-gray-800">
-              <p>
+            <div class="text-sm text-gray-800">
+              <p class="break-all">
                 <a
                   v-if="quoteReply"
                   class="mr-1 inline-flex flex-row items-center gap-1 rounded bg-gray-200 py-0.5 px-1 text-xs font-medium text-gray-600 hover:text-blue-500 hover:underline"