fix style of replace modal

huww98 · Dec 31, 2023 · 35431e3 · 35431e3
1 parent a94d824
commit 35431e3
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/components/RecipeSelect.vue b/src/components/RecipeSelect.vue
@@ -1,7 +1,9 @@
 <template>
     <span @click="openModal = true" class="icon-select" ref="handler" tabindex="0" role="listbox">
         <BuildingIcon v-if="props.recipeId !== null" :icon-id="recipeIconId(props.recipeId)" :alt="recipeName(props.recipeId)"/>
-        <span class="icon icon-placeholder" v-else></span>
+        <span class="icon" v-else>
+            <div class="icon-placeholder"></div>
+        </span>
     </span>
     <Modal :open="openModal" @update:open="o => { if (!o) selected(null) }">
         <div>
@@ -61,6 +63,8 @@ const selected = (i: Recipe | null) => {
 <style lang="scss">
 .icon-select {
     cursor: pointer;
+    display: inline-block;
+
     .icon {
         display: block;
     }
@@ -69,6 +73,7 @@ const selected = (i: Recipe | null) => {
 .icon-placeholder {
     border: 1px dashed currentColor;
     background: #FFF4;
+    padding-top: 100%;
 }
 
 .icon-grid {