From 016d4cd94b9e619a0c03b2a47728f47d10b5ffcb Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 13 Jun 2025 13:30:43 +0800
Subject: [PATCH] fix: resolve text wrapping issue in entity field component
 (#7543)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

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

before:

<img width="759" alt="image" src="https://github.com/user-attachments/assets/13d6ec8c-b0ca-4b49-8589-504a7d506be4" />

after:

<img width="796" alt="image" src="https://github.com/user-attachments/assets/83a41ccb-28b0-4161-bf3f-0ec7a15bda66" />

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

```release-note
None
```
---
 ui/packages/components/src/components/entity/EntityField.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/packages/components/src/components/entity/EntityField.vue b/ui/packages/components/src/components/entity/EntityField.vue
index 5ed0d44dd..99ad07a9a 100644
--- a/ui/packages/components/src/components/entity/EntityField.vue
+++ b/ui/packages/components/src/components/entity/EntityField.vue
@@ -76,7 +76,7 @@ const wrapperStyles = computed(() => {
   @apply inline-flex flex-col gap-1 max-w-xs;
 
   .entity-field-title-body {
-    @apply inline-flex items-center flex-row;
+    @apply inline-flex items-center flex-row whitespace-nowrap;
 
     .entity-field-title {
       @apply truncate text-sm font-medium text-gray-900 mr-2;
@@ -84,7 +84,7 @@ const wrapperStyles = computed(() => {
   }
 
   .entity-field-description-body {
-    @apply inline-flex items-center;
+    @apply inline-flex items-center whitespace-nowrap;
 
     .entity-field-description {
       @apply text-xs text-gray-500 truncate;