From 13e0d34ed9d6a47f8747478c8288ca3551f91cba Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 13 Jun 2025 15:38:42 +0800
Subject: [PATCH] fix: prevent title text overflow in modal component (#7546)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.21.x

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

Fix text overflow issue in modal component.

before:

<img width="454" alt="image" src="https://github.com/user-attachments/assets/7e79f3b4-1f4a-4cbc-aae9-86efa098528d" />

after:

<img width="437" alt="image" src="https://github.com/user-attachments/assets/4d5c4a21-eff0-4121-8aee-d317f12a83c4" />

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

```release-note
修复模态框标题文字溢出的问题。
```
---
 ui/packages/components/src/components/modal/Modal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/packages/components/src/components/modal/Modal.vue b/ui/packages/components/src/components/modal/Modal.vue
index 4c7f603ca..622538f58 100644
--- a/ui/packages/components/src/components/modal/Modal.vue
+++ b/ui/packages/components/src/components/modal/Modal.vue
@@ -236,7 +236,8 @@ watch(
 
       .modal-header-title {
         @apply text-base
-        font-medium;
+        font-medium
+        truncate;
       }
 
       .modal-header-actions {