From 14b13e479d7bb152636e1cf3bdf885eb9358cbca Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Fri, 1 May 2026 06:55:20 +0800
Subject: [PATCH] refactor(ui): update pokemon detail grid layout and section
 title

Apply single-column stack layout to detail grids
Shorten the related items section title for conciseness
---
 frontend/src/styles/main.css         | 4 ++++
 frontend/src/views/PokemonDetail.vue | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index 5582dfa..ff8a6b5 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -913,6 +913,10 @@ button:disabled,
   gap: 16px;
 }
 
+.detail-grid--stack {
+  grid-template-columns: 1fr;
+}
+
 .habitat-detail-stack {
   display: grid;
   gap: 16px;
diff --git a/frontend/src/views/PokemonDetail.vue b/frontend/src/views/PokemonDetail.vue
index b790938..faa4042 100644
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -119,7 +119,7 @@ onMounted(async () => {
       </div>
     </div>
 
-    <div class="detail-grid" aria-hidden="true">
+    <div class="detail-grid detail-grid--stack" aria-hidden="true">
       <section class="detail-section skeleton-detail-section">
         <div class="detail-section__header">
           <Skeleton width="56px" height="24px" />
@@ -174,7 +174,7 @@ onMounted(async () => {
       </template>
     </PageHeader>
 
-    <div class="detail-grid">
+    <div class="detail-grid detail-grid--stack">
       <DetailSection title="特长">
         <EntityChips :items="pokemon.skills" />
       </DetailSection>
@@ -192,7 +192,7 @@ onMounted(async () => {
         <EntityChips :items="pokemon.favorite_things" />
       </DetailSection>
 
-      <DetailSection title="喜欢的东西关联物品">
+      <DetailSection title="关联物品">
         <template v-if="pokemon.favoriteThingItems.length">
           <Tabs
             v-if="itemCategoryTabs.length"