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>