refactor(pokemon): redesign related pokemon and items layout

Display related Pokemon and items sections side-by-side on desktop
Streamline related Pokemon rows by grouping traits and removing labels

frontend/src/styles/main.css

@@ -2630,22 +2630,50 @@ button:disabled,
   justify-content: flex-end;
 }
 
+.pokemon-related-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.pokemon-related-grid > .detail-section {
+  min-width: 0;
+}
+
 .related-pokemon-list li {
   display: block;
 }
 
 .related-pokemon-row {
   display: grid;
-  gap: 12px;
+  gap: 8px;
   min-width: 0;
 }
 
-.related-pokemon-row__header {
+.related-pokemon-row__summary {
+  display: grid;
+  grid-template-columns: minmax(112px, 1fr) minmax(0, auto);
+  align-items: center;
+  gap: 8px 14px;
+  min-width: 0;
+}
+
+.related-pokemon-row__traits {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px 12px;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+}
+
+.related-pokemon-row__skills {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.related-pokemon-row__skills.chips {
   min-width: 0;
 }
 
@@ -2653,7 +2681,9 @@ button:disabled,
   min-width: 0;
   color: var(--ink);
   font-weight: 900;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .related-pokemon-row__environment {
@@ -2667,26 +2697,6 @@ button:disabled,
   color: #172036;
 }
 
-.related-pokemon-row__content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
-  gap: 12px;
-  min-width: 0;
-}
-
-.related-pokemon-row__group {
-  display: grid;
-  align-content: start;
-  gap: 6px;
-  min-width: 0;
-}
-
-.related-pokemon-row__label {
-  color: var(--muted);
-  font-size: 0.76rem;
-  font-weight: 900;
-}
-
 .related-favourite-chip {
   gap: 6px;
   max-width: 100%;
@@ -2694,6 +2704,10 @@ button:disabled,
   overflow-wrap: anywhere;
 }
 
+.related-pokemon-row__favourites {
+  min-width: 0;
+}
+
 .detail-text {
   margin: 0;
   color: var(--ink-soft);
@@ -3374,6 +3388,7 @@ button:disabled,
   .detail-grid,
   .pokemon-profile-grid,
   .pokemon-profile-row,
+  .pokemon-related-grid,
   .admin-layout {
     grid-template-columns: 1fr;
   }
@@ -3509,6 +3524,18 @@ button:disabled,
     grid-template-columns: 1fr;
   }
 
+  .related-pokemon-row {
+    grid-template-columns: 1fr;
+  }
+
+  .related-pokemon-row__summary {
+    grid-template-columns: 1fr;
+  }
+
+  .related-pokemon-row__traits {
+    justify-content: flex-start;
+  }
+
   .appearance-summary div {
     grid-template-columns: 68px minmax(0, 1fr);
   }

frontend/src/views/PokemonDetail.vue

@@ -346,77 +346,76 @@ watch(
           <EntityChips :items="pokemon.favorite_things" />
         </DetailSection>
 
-        <DetailSection :title="t('pages.pokemon.relatedPokemon')">
-          <template v-if="pokemon.relatedPokemon.length">
-            <Tabs
-              v-if="relatedHabitatTabs.length"
-              id="pokemon-related-habitats"
-              v-model="relatedHabitatTab"
-              :tabs="relatedHabitatTabs"
-              :label="t('pages.pokemon.relatedHabitat')"
-            />
-            <ul v-if="relatedPokemonRows.length" class="row-list related-pokemon-list">
-              <li v-for="related in relatedPokemonRows" :key="related.id">
-                <div class="related-pokemon-row">
-                  <div class="related-pokemon-row__header">
-                    <RouterLink class="related-pokemon-row__name" :to="`/pokemon/${related.id}`">#{{ related.id }} {{ related.name }}</RouterLink>
-                    <span
-                      class="chip related-pokemon-row__environment"
-                      :class="{ 'related-pokemon-row__environment--match': related.environment.id === pokemon.environment.id }"
-                    >
-                      {{ related.environment.name }}
-                    </span>
-                  </div>
-
-                  <div class="related-pokemon-row__content">
-                    <div class="related-pokemon-row__group">
-                      <span class="related-pokemon-row__label">{{ t('pages.pokemon.skills') }}</span>
-                      <EntityChips v-if="related.skills.length" :items="related.skills" />
-                      <span v-else class="meta-line">{{ t('common.none') }}</span>
-                    </div>
-
-                    <div class="related-pokemon-row__group">
-                      <span class="related-pokemon-row__label">{{ t('pages.pokemon.favoriteThings') }}</span>
-                      <div v-if="related.favorite_things.length" class="chips">
+        <div class="pokemon-related-grid">
+          <DetailSection :title="t('pages.pokemon.relatedPokemon')">
+            <template v-if="pokemon.relatedPokemon.length">
+              <Tabs
+                v-if="relatedHabitatTabs.length"
+                id="pokemon-related-habitats"
+                v-model="relatedHabitatTab"
+                :tabs="relatedHabitatTabs"
+                :label="t('pages.pokemon.relatedHabitat')"
+              />
+              <ul v-if="relatedPokemonRows.length" class="row-list related-pokemon-list">
+                <li v-for="related in relatedPokemonRows" :key="related.id">
+                  <div class="related-pokemon-row">
+                    <div class="related-pokemon-row__summary">
+                      <RouterLink class="related-pokemon-row__name" :to="`/pokemon/${related.id}`">#{{ related.id }} {{ related.name }}</RouterLink>
+                      <div class="related-pokemon-row__traits">
+                        <EntityChips
+                          v-if="related.skills.length"
+                          class="related-pokemon-row__skills"
+                          :items="related.skills"
+                        />
                         <span
-                          v-for="thing in related.favorite_things"
-                          :key="thing.id"
-                          class="chip related-favourite-chip"
-                          :class="{ 'related-favourite-chip--match': thing.matches }"
+                          class="chip related-pokemon-row__environment"
+                          :class="{ 'related-pokemon-row__environment--match': related.environment.id === pokemon.environment.id }"
                         >
-                          {{ thing.name }}
+                          {{ related.environment.name }}
                         </span>
                       </div>
-                      <span v-else class="meta-line">{{ t('common.none') }}</span>
+                    </div>
+                    <div
+                      v-if="related.favorite_things.length"
+                      class="chips related-pokemon-row__favourites"
+                    >
+                      <span
+                        v-for="thing in related.favorite_things"
+                        :key="thing.id"
+                        class="chip related-favourite-chip"
+                        :class="{ 'related-favourite-chip--match': thing.matches }"
+                      >
+                        {{ thing.name }}
+                      </span>
                     </div>
                   </div>
-                </div>
-              </li>
-            </ul>
+                </li>
+              </ul>
+              <p v-else class="meta-line">{{ t('common.none') }}</p>
+            </template>
             <p v-else class="meta-line">{{ t('common.none') }}</p>
-          </template>
-          <p v-else class="meta-line">{{ t('common.none') }}</p>
-        </DetailSection>
+          </DetailSection>
 
-        <DetailSection :title="t('pages.pokemon.relatedItems')">
-          <template v-if="pokemon.favoriteThingItems.length">
-            <Tabs
-              v-if="itemCategoryTabs.length"
-              id="pokemon-favorite-items"
-              v-model="itemCategoryTab"
-              :tabs="itemCategoryTabs"
-              :label="t('pages.pokemon.relatedItemCategory')"
-            />
-            <ul v-if="favoriteThingItems.length" class="row-list">
-              <li v-for="item in favoriteThingItems" :key="item.id">
-                <RouterLink :to="`/items/${item.id}`">{{ item.name }}</RouterLink>
-                <EntityChips :items="item.tags" />
-              </li>
-            </ul>
+          <DetailSection :title="t('pages.pokemon.relatedItems')">
+            <template v-if="pokemon.favoriteThingItems.length">
+              <Tabs
+                v-if="itemCategoryTabs.length"
+                id="pokemon-favorite-items"
+                v-model="itemCategoryTab"
+                :tabs="itemCategoryTabs"
+                :label="t('pages.pokemon.relatedItemCategory')"
+              />
+              <ul v-if="favoriteThingItems.length" class="row-list">
+                <li v-for="item in favoriteThingItems" :key="item.id">
+                  <RouterLink :to="`/items/${item.id}`">{{ item.name }}</RouterLink>
+                  <EntityChips :items="item.tags" />
+                </li>
+              </ul>
+              <p v-else class="meta-line">{{ t('common.none') }}</p>
+            </template>
             <p v-else class="meta-line">{{ t('common.none') }}</p>
-          </template>
-          <p v-else class="meta-line">{{ t('common.none') }}</p>
-        </DetailSection>
+          </DetailSection>
+        </div>
 
         <DetailSection :title="t('pages.pokemon.habitats')">
           <ul class="row-list appearance-list">