From edd4277055fd674f0d7ebf47bbac975fbe94f50d Mon Sep 17 00:00:00 2001
From: scissorsneedfoodtoo <scissorsneedfoodtoo@gmail.com>
Date: Thu, 16 Nov 2023 15:56:57 +0900
Subject: [PATCH] fix: layout shift after first search

---
 apps/pokemon-search-app/index.html        | 2 +-
 apps/pokemon-search-app/public/styles.css | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/pokemon-search-app/index.html b/apps/pokemon-search-app/index.html
index 178df7525..3735d3332 100644
--- a/apps/pokemon-search-app/index.html
+++ b/apps/pokemon-search-app/index.html
@@ -30,7 +30,7 @@ <h1>Pokémon Search App</h1>
             <span id="weight"></span>
             <span id="height"></span>
           </div>
-          <img src alt id="sprite" />
+          <div class="sprite-container"><img alt id="sprite" /></div>
           <div id="types"></div>
         </div>
         <div class="bottom-container">
diff --git a/apps/pokemon-search-app/public/styles.css b/apps/pokemon-search-app/public/styles.css
index ac3f4de95..863435879 100644
--- a/apps/pokemon-search-app/public/styles.css
+++ b/apps/pokemon-search-app/public/styles.css
@@ -114,10 +114,15 @@ label {
   font-size: 0.85rem;
 }
 
+.sprite-container {
+  flex-grow: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 #sprite {
-  margin: 20px 0;
   width: 180px;
-  align-self: center;
 }
 
 #types {