From b305e8b65d210f359d0a07a2cbafb8c537e9c55f Mon Sep 17 00:00:00 2001
From: zhangx1n <zhangxin@dify.ai>
Date: Mon, 4 May 2026 11:48:46 +0800
Subject: [PATCH] fix(deployments): clean up runtime binding display

Show runtime bindings as a single summary to avoid duplicated overlapping text in deployment details.\n\nEnable build-push workflow runs for the 4-27-app-deploy branch so app deploy images can be built from this branch.
---
 .github/workflows/build-push.yml              |  1 +
 .../detail/deploy-tab/deployment-panel.tsx    | 45 +++++++++++--------
 web/features/deployments/utils.ts             |  3 ++
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/.github/workflows/build-push.yml b/.github/workflows/build-push.yml
index 915ed6cfe8..bec2a1a1b6 100644
--- a/.github/workflows/build-push.yml
+++ b/.github/workflows/build-push.yml
@@ -9,6 +9,7 @@ on:
       - "release/e-*"
       - "hotfix/**"
       - "feat/hitl-backend"
+      - "4-27-app-deploy"
     tags:
       - "*"
 
diff --git a/web/features/deployments/detail/deploy-tab/deployment-panel.tsx b/web/features/deployments/detail/deploy-tab/deployment-panel.tsx
index 26e62f779d..730c573ea3 100644
--- a/web/features/deployments/detail/deploy-tab/deployment-panel.tsx
+++ b/web/features/deployments/detail/deploy-tab/deployment-panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { FC, ReactNode } from 'react'
-import type { EnvironmentDeploymentRow } from '@/features/deployments/types'
+import type { EnvironmentDeploymentRow, RuntimeBindingDisplay } from '@/features/deployments/types'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from 'react-i18next'
 import {
@@ -15,8 +15,7 @@ import {
   isRuntimePluginBinding,
   releaseCommit,
   releaseLabel,
-  runtimeBindingLabel,
-  runtimeBindingValue,
+  runtimeBindingSummary,
 } from '../../utils'
 
 type InfoBlockProps = {
@@ -39,15 +38,31 @@ type InfoRowProps = {
 }
 
 const InfoRow: FC<InfoRowProps> = ({ label, value, mono, suffix }) => (
-  <div className="grid min-w-0 grid-cols-[120px_minmax(0,1fr)] items-start gap-2">
+  <div className="grid min-w-0 grid-cols-[minmax(88px,0.35fr)_minmax(0,1fr)] items-start gap-2">
     <span className="system-xs-regular text-text-tertiary">{label}</span>
-    <span className={cn('min-w-0 system-sm-regular break-words text-text-primary', mono && 'font-mono')}>
+    <span className={cn('min-w-0 system-sm-regular break-all text-text-primary', mono && 'font-mono')}>
       {value}
       {suffix && <span className="system-xs-regular text-text-tertiary">{suffix}</span>}
     </span>
   </div>
 )
 
+type RuntimeBindingItemProps = {
+  binding: RuntimeBindingDisplay
+}
+
+const RuntimeBindingItem: FC<RuntimeBindingItemProps> = ({ binding }) => {
+  const summary = runtimeBindingSummary(binding)
+
+  return (
+    <div className="min-w-0">
+      <span className="block min-w-0 truncate system-xs-regular text-text-tertiary" title={summary}>
+        {summary}
+      </span>
+    </div>
+  )
+}
+
 type DeploymentPanelProps = {
   row: EnvironmentDeploymentRow
 }
@@ -86,29 +101,23 @@ export const DeploymentPanel: FC<DeploymentPanelProps> = ({ row }) => {
         {(modelCredentials.length > 0 || pluginCredentials.length > 0 || envVars.length > 0) && (
           <div className="xl:col-span-2">
             <InfoBlock title={t('deployTab.panel.runtimeBindings')}>
-              <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
+              <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
                 {modelCredentials.map(c => (
-                  <InfoRow
+                  <RuntimeBindingItem
                     key={`${c.kind}-${c.slot}-${c.label}-${c.displayName}-${c.displayValue}-${c.maskedValue}`}
-                    label={runtimeBindingLabel(c)}
-                    value={runtimeBindingValue(c)}
-                    mono
+                    binding={c}
                   />
                 ))}
                 {pluginCredentials.map(c => (
-                  <InfoRow
+                  <RuntimeBindingItem
                     key={`${c.kind}-${c.slot}-${c.label}-${c.displayName}-${c.displayValue}-${c.maskedValue}`}
-                    label={runtimeBindingLabel(c)}
-                    value={runtimeBindingValue(c)}
-                    mono
+                    binding={c}
                   />
                 ))}
                 {envVars.map(v => (
-                  <InfoRow
+                  <RuntimeBindingItem
                     key={`${v.kind}-${v.slot}-${v.label}-${v.displayName}-${v.displayValue}`}
-                    label={runtimeBindingLabel(v)}
-                    value={runtimeBindingValue(v)}
-                    mono
+                    binding={v}
                   />
                 ))}
               </div>
diff --git a/web/features/deployments/utils.ts b/web/features/deployments/utils.ts
index 8eb017bfb7..273766a9b9 100644
--- a/web/features/deployments/utils.ts
+++ b/web/features/deployments/utils.ts
@@ -53,6 +53,9 @@ export const runtimeBindingLabel = (binding?: RuntimeBindingDisplay) =>
 export const runtimeBindingValue = (binding?: RuntimeBindingDisplay) =>
   binding?.displayValue || binding?.maskedValue || binding?.displayName || '—'
 
+export const runtimeBindingSummary = (binding?: RuntimeBindingDisplay) =>
+  binding?.label || binding?.slot || binding?.displayName || binding?.displayValue || binding?.maskedValue || binding?.kind || '—'
+
 export const isRuntimeEnvVarBinding = (binding?: RuntimeBindingDisplay) =>
   (binding?.kind?.toLowerCase() ?? '').includes('env')