perf: improve word-break style for comment content (halo-dev/console#852

)

#### What type of PR is this?

/kind improvement

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

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

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

Fixes halo-dev#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 的评论管理中内容文字过长导致样式异常的问题。
```

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">

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"