fix: prevent title text overflow in modal component (#7546)

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

@@ -236,7 +236,8 @@ watch(
 
       .modal-header-title {
         @apply text-base
-        font-medium;
+        font-medium
+        truncate;
       }
 
       .modal-header-actions {