From 269f0a9eefc30aa354c797c474525b4e50ca3c14 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <1paneldev@sina.com>
Date: Sat, 28 Feb 2026 18:23:14 +0800
Subject: [PATCH] fix(frontend): stabilize installed app card name truncation

---
 frontend/src/lang/modules/en.ts               |  2 +-
 frontend/src/views/app-store/index.scss       | 52 +++++++++----------
 .../views/app-store/installed/app/header.vue  | 10 ++--
 .../src/views/app-store/setting/index.vue     |  8 ++-
 4 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index 520158c5b15b..d33deaf67718 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -2341,7 +2341,7 @@ const message = {
         all: 'All',
         version: 'Version',
         detail: 'Details',
-        params: 'Edit parameters',
+        params: 'Parameters',
         author: 'Author',
         source: 'Source',
         appName: 'Application Name',
diff --git a/frontend/src/views/app-store/index.scss b/frontend/src/views/app-store/index.scss
index fdc326dc06bd..9c261d8652e6 100644
--- a/frontend/src/views/app-store/index.scss
+++ b/frontend/src/views/app-store/index.scss
@@ -13,39 +13,39 @@
 
     .a-detail {
         .d-name {
+            .d-name-row {
+                gap: 8px;
+                min-width: 0;
+            }
+
+            .name-actions {
+                flex: 1;
+                min-width: 0;
+                flex-wrap: nowrap;
+                overflow: hidden;
+            }
+
+            .operate-actions {
+                flex-shrink: 0;
+            }
+
+            .name-wrap {
+                min-width: 0;
+                max-width: clamp(140px, 22vw, 320px);
+                flex-shrink: 1;
+                margin-right: 4px;
+                overflow: hidden;
+            }
+
             .name {
+                display: block;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 font-weight: 500;
                 font-size: 18px;
                 color: var(--panel-text-color);
-
-                max-width: 100px;
-
-                @media (min-width: 576px) {
-                    max-width: 120px;
-                }
-
-                @media (min-width: 768px) {
-                    max-width: 150px;
-                }
-
-                @media (min-width: 992px) {
-                    max-width: 180px;
-                }
-
-                @media (min-width: 1200px) {
-                    max-width: 220px;
-                }
-
-                @media (min-width: 1600px) {
-                    max-width: 280px;
-                }
-
-                @media (min-width: 1920px) {
-                    max-width: 350px;
-                }
+                max-width: 100%;
             }
 
             .status {
diff --git a/frontend/src/views/app-store/installed/app/header.vue b/frontend/src/views/app-store/installed/app/header.vue
index 2b4ce6abdcc1..5abc827fe41f 100644
--- a/frontend/src/views/app-store/installed/app/header.vue
+++ b/frontend/src/views/app-store/installed/app/header.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="d-name">
-        <div class="flex items-center justify-between">
-            <div class="min-w-50 flex items-center justify-start gap-1">
-                <el-button link type="info">
+        <div class="d-name-row flex items-center justify-between">
+            <div class="name-actions flex items-center justify-start gap-1">
+                <div class="name-wrap">
                     <el-tooltip :content="installed.name" placement="top">
                         <span class="name">{{ installed.name }}</span>
                     </el-tooltip>
-                </el-button>
+                </div>
                 <span class="status">
                     <Status :key="installed.status" :status="installed.status"></Status>
                 </span>
@@ -94,7 +94,7 @@
                     </el-tooltip>
                 </span>
             </div>
-            <div class="flex flex-wrap items-center justify-end gap-1">
+            <div class="operate-actions flex flex-wrap items-center justify-end gap-1">
                 <el-button
                     class="h-button"
                     plain
diff --git a/frontend/src/views/app-store/setting/index.vue b/frontend/src/views/app-store/setting/index.vue
index ae838cee197c..0fc56be4e2ab 100644
--- a/frontend/src/views/app-store/setting/index.vue
+++ b/frontend/src/views/app-store/setting/index.vue
@@ -4,8 +4,8 @@
             <el-form
                 :model="config"
                 label-position="left"
-                label-width="180px"
-                class="ml-2.5"
+                label-width="260px"
+                class="ml-2.5 app-setting-form"
                 v-loading="loading"
                 :rules="rules"
                 ref="configForm"
@@ -142,6 +142,10 @@ onMounted(() => {
 </script>
 
 <style lang="css" scoped>
+.app-setting-form :deep(.el-form-item__label) {
+    white-space: nowrap;
+}
+
 .logText {
     line-height: 22px;
     font-size: 12px;