From 9e0888b51e8af48eb233bb7d8bdb2ff7d05c09d1 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Sun, 27 Sep 2026 09:27:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8D=8F=E8=AE=AE=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E4=B8=A4=E8=A1=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

提交当前协议名称、服务类型和参数区域的布局调整，作为继续修正 SMTP 标签显示问题前的检查点。
---
 .../ThirdPartyAuthorization.css               | 81 +++++++------------
 1 file changed, 28 insertions(+), 53 deletions(-)

diff --git a/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css b/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
index d398df8..86dd28a 100644
--- a/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
+++ b/frontend/src/views/components/ThirdPartyAuthorization/ThirdPartyAuthorization.css
@@ -263,48 +263,50 @@
 }
 
 .proto-name-badge {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-rows: auto auto;
-  align-items: baseline;
-  gap: 2px 8px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
   min-width: 0;
 }
 
 .proto-name-badge > .el-tag {
-  grid-column: 2;
-  grid-row: 2;
-  justify-self: end;
-  max-width: 100%;
+  flex: 0 1 auto;
+  align-self: flex-end;
+  max-width: 42%;
   padding-inline: 4px;
   font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .proto-title {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: auto auto;
-  grid-column: 1;
-  grid-row: 1 / 3;
+  display: flex;
+  flex-direction: column;
   min-width: 0;
   gap: 2px;
   line-height: 1.35;
 }
 
 .proto-name {
-  grid-row: 1;
+  min-width: 0;
   font-size: 14px;
   font-weight: 700;
   color: var(--pm-text-primary);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .proto-service {
-  grid-row: 2;
+  min-width: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--pm-text-primary);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .btn-card-copy {
@@ -317,19 +319,19 @@
 }
 
 .proto-fields {
-  display: grid;
-  grid-template-columns: minmax(0, 1.5fr) minmax(72px, 0.75fr) minmax(0, 1fr);
-  gap: 8px;
-  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   padding-top: 1px;
 }
 
 .field-item {
-  display: flex;
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
   align-items: baseline;
   min-width: 0;
   font-size: 13px;
-  gap: 5px;
+  gap: 6px;
   line-height: 1.35;
 }
 
@@ -341,9 +343,10 @@
 .field-v {
   min-width: 0;
   color: var(--pm-text-primary);
-  text-align: left;
-  word-break: normal;
-  overflow-wrap: anywhere;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .font-mono {
@@ -386,32 +389,4 @@
     margin-left: 0;
   }
 
-  .proto-fields {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 6px;
-  }
-
-  .field-item {
-    display: block;
-  }
-
-  .field-k,
-  .field-v {
-    display: block;
-  }
-}
-
-@media (max-width: 640px) {
-  .proto-fields {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .field-item {
-    display: flex;
-  }
-
-  .field-k,
-  .field-v {
-    display: inline;
-  }
 }