From 4044dd341ee9ca2fa546fa28d4a54c57a32ad0f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E7=8E=AE=E6=96=87?= <huww98@outlook.com>
Date: Mon, 25 Dec 2023 15:20:46 +0800
Subject: [PATCH] fix item grid not high enough

---
 src/components/ItemSelect.vue   |  4 ++--
 src/components/RecipeSelect.vue | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/ItemSelect.vue b/src/components/ItemSelect.vue
index 9b28ad8..2f87f89 100644
--- a/src/components/ItemSelect.vue
+++ b/src/components/ItemSelect.vue
@@ -14,12 +14,12 @@
                 {{ t('建筑公式') }}
             </div>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid item">
             <BuildingIcon v-for="i of iconsLeft" :icon-id="itemIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2]}"
                 @click="selected(i)"/>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid item">
             <BuildingIcon v-for="i of iconsRight" :icon-id="itemIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2] - 7}"
                 @click="selected(i)"/>
diff --git a/src/components/RecipeSelect.vue b/src/components/RecipeSelect.vue
index 4199c3e..fd5197c 100644
--- a/src/components/RecipeSelect.vue
+++ b/src/components/RecipeSelect.vue
@@ -14,12 +14,12 @@
                 {{ t('建筑公式') }}
             </div>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid recipe">
             <BuildingIcon v-for="i of iconsLeft" :icon-id="recipeIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2]}"
                 @click="selected(i)"/>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid recipe">
             <BuildingIcon v-for="i of iconsRight" :icon-id="recipeIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2] - 7}"
                 @click="selected(i)"/>
@@ -73,9 +73,15 @@ const selected = (i: Recipe | null) => {
     @media screen and (max-width: 640px) {
         display: grid;
     }
-    grid-template: repeat(7, 1fr) / repeat(7, 1fr);
     --cell-size: 40px;
-    height: calc(7 * var(--cell-size));
+    &.recipe {
+        grid-template: repeat(7, 1fr) / repeat(7, 1fr);
+        height: calc(7 * var(--cell-size));
+    }
+    &.item {
+        grid-template: repeat(8, 1fr) / repeat(7, 1fr);
+        height: calc(8 * var(--cell-size));
+    }
     width: calc(7 * var(--cell-size));
 
     .icon {