From bc64d83ab2103068578595b0d0806299eb183090 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud
 <48425184+jianneng-fit2cloud@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:32:30 +0800
Subject: [PATCH] style: Container style (#7422)

---
 frontend/src/views/container/container/index.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 73a672917..ae3220846 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -206,7 +206,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('container.related')" min-width="210" prop="appName">
                         <template #default="{ row }">
-                            <div>
+                            <div class="cell-button-class">
                                 <el-tooltip
                                     v-if="row.appName != ''"
                                     :hide-after="20"
@@ -223,7 +223,7 @@
                                     </el-button>
                                 </el-tooltip>
                             </div>
-                            <div>
+                            <div class="cell-button-class">
                                 <el-tooltip
                                     v-if="row.websites != null"
                                     :hide-after="20"
@@ -251,7 +251,7 @@
                         prop="ports"
                     >
                         <template #default="{ row }">
-                            <div v-if="row.ports">
+                            <div v-if="row.ports" class="cell-button-class">
                                 <div v-for="(item, index) in row.ports" :key="index">
                                     <div v-if="row.expand || (!row.expand && index < 3)">
                                         <el-tooltip :hide-after="20" :content="item" placement="top">
@@ -786,4 +786,11 @@ onMounted(() => {
     font-size: 6px;
     cursor: pointer;
 }
+.cell-button-class {
+    button,
+    :deep(span) {
+        max-width: 100%;
+        overflow: hidden;
+    }
+}
 </style>