diff --git a/frontend/src/components/pure/ms-detail-card/index.vue b/frontend/src/components/pure/ms-detail-card/index.vue
index 20695ab245..016d969671 100644
--- a/frontend/src/components/pure/ms-detail-card/index.vue
+++ b/frontend/src/components/pure/ms-detail-card/index.vue
@@ -18,13 +18,17 @@
       <div
         v-for="item of showingDescription"
         :key="item.key"
-        class="flex w-[calc(100%/3)] items-center gap-[8px]"
+        :class="[
+          `ms-detail-card-desc-item ${
+            Array.isArray(item.value) && item.value.length > 0 ? 'ms-detail-card-desc-tag' : ''
+          } flex w-[calc(100%/3)] items-center gap-[8px]`,
+        ]"
         :style="{ width: item.width }"
       >
         <div class="whitespace-nowrap text-[var(--color-text-4)]">
           {{ t(item.locale) }}
         </div>
-        <div v-if="Array.isArray(item.value)">
+        <div v-if="Array.isArray(item.value)" class="pr-[24px]">
           <MsTagGroup v-if="item.value.length > 0" :tag-list="item.value" size="small" is-string-tag />
           <div v-else>-</div>
         </div>
diff --git a/frontend/src/views/api-test/management/components/management/api/preview/index.vue b/frontend/src/views/api-test/management/components/management/api/preview/index.vue
index 3ed9a4ac2e..46c5e2a85d 100644
--- a/frontend/src/views/api-test/management/components/management/api/preview/index.vue
+++ b/frontend/src/views/api-test/management/components/management/api/preview/index.vue
@@ -193,12 +193,14 @@
   :deep(.ms-detail-card) {
     gap: 12px;
     .ms-detail-card-desc {
-      column-gap: 24px;
       row-gap: 8px;
-      & > div:nth-of-type(n) {
+      .ms-detail-card-desc-item {
         width: auto;
         max-width: 300px;
       }
+      .ms-detail-card-desc-tag {
+        max-width: fit-content;
+      }
     }
   }
 </style>