diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 21b4f14d0..813283596 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -321,7 +321,10 @@ watch(
                   </div>
                 </template>
               </VEntityField>
-              <VEntityField :title="singlePage.page.spec.title">
+              <VEntityField
+                :title="singlePage.page.spec.title"
+                max-width="30rem"
+              >
                 <template #description>
                   <VSpace>
                     <span class="text-xs text-gray-500">
diff --git a/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue b/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue
index c5e71e43b..534f0107a 100644
--- a/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue
+++ b/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue
@@ -32,6 +32,7 @@ const externalUrl = computed(() => {
       name: 'SinglePageEditor',
       query: { name: singlePage.page.metadata.name },
     }"
+    max-width="30rem"
   >
     <template #extra>
       <VSpace>
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index b1f6c4cbe..00c91f4a4 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -330,7 +330,7 @@ watch(
                   </div>
                 </template>
               </VEntityField>
-              <VEntityField :title="post.post.spec.title">
+              <VEntityField :title="post.post.spec.title" max-width="30rem">
                 <template #description>
                   <div class="flex flex-col gap-1.5">
                     <VSpace class="flex-wrap !gap-y-1">
diff --git a/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue b/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue
index a38e1d65d..90d3a1ac4 100644
--- a/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue
@@ -33,6 +33,7 @@ const externalUrl = computed(() => {
       name: 'PostEditor',
       query: { name: post.post.metadata.name },
     }"
+    max-width="30rem"
   >
     <template #extra>
       <VSpace>
diff --git a/ui/packages/components/src/components/entity/EntityField.vue b/ui/packages/components/src/components/entity/EntityField.vue
index 99ad07a9a..36b85f24d 100644
--- a/ui/packages/components/src/components/entity/EntityField.vue
+++ b/ui/packages/components/src/components/entity/EntityField.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, type CSSProperties } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
 const props = withDefaults(
@@ -8,12 +8,14 @@ const props = withDefaults(
     description?: string;
     route?: RouteLocationRaw;
     width?: string | number;
+    maxWidth?: string | number;
   }>(),
   {
     title: undefined,
     description: undefined,
     route: undefined,
     width: undefined,
+    maxWidth: undefined,
   }
 );
 
@@ -22,16 +24,19 @@ const emit = defineEmits<{
 }>();
 
 const wrapperStyles = computed(() => {
+  const styles: CSSProperties = {};
   if (props.width) {
-    const width =
-      typeof props.width === "string" ? props.width : `${props.width}px`;
-    return {
-      width,
-      maxWidth: width,
-    };
+    styles.width = getWidthStyleValue(props.width);
   }
-  return {};
+  if (props.maxWidth) {
+    styles.maxWidth = getWidthStyleValue(props.maxWidth);
+  }
+  return styles;
 });
+
+function getWidthStyleValue(value: string | number) {
+  return typeof value === "string" ? value : `${value}px`;
+}
 </script>
 
 <template>
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index 76d9e4222..769cf4ccd 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -138,6 +138,7 @@ function handleDelete() {
           name: 'PostEditor',
           query: { name: post.post.metadata.name },
         }"
+        max-width="30rem"
       >
         <template #extra>
           <VSpace class="mt-1 sm:mt-0">