perf: improve the layout of the post list (#789)

#### 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/halo#2963

#### Screenshots:

<img width="717" alt="image" src="https://user-images.githubusercontent.com/21301288/208836747-c6f97d7f-487a-4984-aa54-ee0d3c5b535a.png">

#### Special notes for your reviewer:

测试方式：

1. 添加若干个文字数量较多的分类。
2. 观察文章列表的样式是否有问题。

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

```release-note
优化 Console 端文章管理列表的布局，修复当分类设置过多时的样式问题。
```

packages/components/src/components/entity/EntityField.vue

@@ -23,8 +23,11 @@ const emit = defineEmits<{
 
 const wrapperStyles = computed(() => {
   if (props.width) {
+    const width =
+      typeof props.width === "string" ? props.width : `${props.width}px`;
     return {
-      width: typeof props.width === "string" ? props.width : `${props.width}px`,
+      width,
+      maxWidth: width,
     };
   }
   return {};

src/modules/contents/posts/DeletedPostList.vue

@@ -346,7 +346,7 @@ function handleClearKeyword() {
                 />
               </template>
               <template #start>
-                <VEntityField :title="post.post.spec.title">
+                <VEntityField :title="post.post.spec.title" width="27rem">
                   <template #extra>
                     <VSpace class="mt-1 sm:mt-0">
                       <PostTag
@@ -358,7 +358,7 @@ function handleClearKeyword() {
                     </VSpace>
                   </template>
                   <template #description>
-                    <VSpace>
+                    <VSpace class="flex-wrap !gap-y-1">
                       <p
                         v-if="post.categories.length"
                         class="inline-flex flex-wrap gap-1 text-xs text-gray-500"

src/modules/contents/posts/PostList.vue

@@ -803,6 +803,7 @@ const hasFilters = computed(() => {
                     name: 'PostEditor',
                     query: { name: post.post.metadata.name },
                   }"
+                  width="27rem"
                 >
                   <template #extra>
                     <VSpace class="mt-1 sm:mt-0">
@@ -835,7 +836,7 @@ const hasFilters = computed(() => {
                     </VSpace>
                   </template>
                   <template #description>
-                    <VSpace>
+                    <VSpace class="flex-wrap !gap-y-1">
                       <p
                         v-if="post.categories.length"
                         class="inline-flex flex-wrap gap-1 text-xs text-gray-500"