From 09ed83dc7e70ddf66ed878f71074379f00c5c37a Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Thu, 30 Apr 2026 17:56:22 +0800
Subject: [PATCH] fix(ui): prevent text overflow in appearance list and adjust
 layout

Add text truncation to appearance names to prevent layout breakage.
Use clamp() for appearance list grid columns and update habitat detail spacing.
---
 frontend/src/styles/main.css         | 12 ++++++++++--
 frontend/src/views/HabitatDetail.vue |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 6979c16..5582dfa 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -766,7 +766,7 @@ button:disabled,
 
 .skeleton-appearance-row {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
+  grid-template-columns: clamp(140px, 20%, 220px) minmax(0, 1fr);
   gap: 12px;
 }
 
@@ -913,6 +913,11 @@ button:disabled,
   gap: 16px;
 }
 
+.habitat-detail-stack {
+  display: grid;
+  gap: 16px;
+}
+
 .detail-section {
   display: grid;
   gap: 12px;
@@ -988,12 +993,15 @@ button:disabled,
 
 .appearance-list li {
   display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
+  grid-template-columns: clamp(140px, 20%, 220px) minmax(0, 1fr);
   align-items: start;
   justify-content: stretch;
 }
 
 .appearance-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
diff --git a/frontend/src/views/HabitatDetail.vue b/frontend/src/views/HabitatDetail.vue
index 712353b..b1ea25c 100644
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -94,7 +94,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div class="detail-grid" aria-hidden="true">
+    <div class="habitat-detail-stack" aria-hidden="true">
       <section class="detail-section skeleton-detail-section">
         <div class="detail-section__header">
           <Skeleton width="92px" height="24px" />
@@ -138,7 +138,7 @@ onMounted(async () => {
       </template>
     </PageHeader>
 
-    <div class="detail-grid">
+    <div class="habitat-detail-stack">
       <DetailSection title="配方列表">
         <EntityChips :items="habitat.recipe" />
       </DetailSection>