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

@@ -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;
 }
 

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>