From 5b2aafc4e52324503ce4c87d7414c523824d7a8c Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Mon, 9 Jun 2025 18:21:34 -0400
Subject: [PATCH] Made some responsive styling changes.

---
 .../Pokemon Components/PokemonBadge.razor.css |  19 ++--
 .../Pokemon Components/PokemonCard.razor      | 101 +++++++++---------
 .../Pokemon Components/PokemonCard.razor.css  |   6 ++
 .../Pages/Pokemon Pages/PokemonRate.razor     |   4 +-
 .../Pages/Pokemon Pages/PokemonView.razor     |   2 +-
 .../Pages/Pokemon Pages/PokemonView.razor.css |   5 +
 6 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css
index 017d1c0..e586ab9 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css	
@@ -1,17 +1,22 @@
 .badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 90px;
     height: 30px;
-    color: white;
-    padding: 4px 8px;
+    padding: 0.25rem;
     border-radius: 30px;
+    color: white;
+    font-size: clamp(0.7rem, 1vw, 0.9rem);
+    text-align: center;
+    white-space: nowrap;
 }
 
 .statText {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: .8rem;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    text-align: center;
 }
 
 /* Sleep Type Badge Styling */
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor
index 9eeadfc..70af53a 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor	
@@ -1,60 +1,59 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
-    <!-- Pokemon Name, Number, and Type -->
-    <div class="z-3">
-        @if (_pokemon.IsVariation) 
-        {
-            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
-        }
-        else 
-        { 
-            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div> 
-        }
-        <div class="pokemon-number">
-            <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
+<div class="card-wrapper d-flex flex-column align-items-center">
+    <div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
+        <!-- Pokemon Name, Number, and Type -->
+        <div class="z-3">
+            @if (_pokemon.IsVariation) 
+            {
+                <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
+            }
+            else 
+            { 
+                <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div> 
+            }
+            <div class="pokemon-number">
+                <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
+            </div>
+            <div >
+                <img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
+            </div>
         </div>
-        <div >
-            <img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
+
+        <!-- Pokemon Image -->
+        <div class="flip-container z-1" @onclick="() => ToggleImage()">
+            <div class="flipper @(isShiny ? "flipped" : "")">
+                <img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
+                <img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
+            </div>
         </div>
+
+        <!-- Pokemon Flavortext -->
+        <div class="z-3 pokemon-flavor-text @(GetTypeCssClass(_pokemon.PokemonType))">
+            @if (string.IsNullOrEmpty(_pokemon.FlavorText))
+            {
+                <p class="fw-light">[ Pokemon Flavor Text Placeholder ]</p>
+
+            }
+            else
+            {
+                <p class="fw-light">@_pokemon.FlavorText</p>
+
+            }
+        </div>
+
+        <!-- Pokemon Sleep Type and Specialty Badges -->
+        <div class="position-absolute bottom-0 end-0 z-2">
+            <div class="d-flex justify-content-between">
+                <PokemonBadge BadgeItem="@_pokemon.SleepType" />
+                <PokemonBadge BadgeItem="@_pokemon.Speciality" />
+            </div>
+        </div>
+
     </div>
 
-    <!-- Pokemon Image -->
-    <div class="flip-container z-1" @onclick="() => ToggleImage()">
-        <div class="flipper @(isShiny ? "flipped" : "")">
-            <img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
-            <img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
-        </div>
-    </div>
-
-    <!-- Pokemon Flavortext -->
-    <div class="z-3 pokemon-flavor-text @(GetTypeCssClass(_pokemon.PokemonType))">
-        @if (string.IsNullOrEmpty(_pokemon.FlavorText))
-        {
-            <p class="fw-light">[ Pokemon Flavor Text Placeholder ]</p>
-
-        }
-        else
-        {
-            <p class="fw-light">@_pokemon.FlavorText</p>
-
-        }
-    </div>
-
-    <!-- Pokemon Sleep Type and Specialty Badges -->
-    <div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
-        <div class="d-flex justify-content-between">
-            <PokemonBadge BadgeItem="@_pokemon.SleepType" />
-            <PokemonBadge BadgeItem="@_pokemon.Speciality" />
-        </div>
-    </div>
-
-</div>
-
-<div class="mt-5 position-relative">
-    <div class="position-absolute top-50 start-50 translate-middle">
-        <PokemonEditButton PokemonId="@_pokemon.Id" />
-
+    <div class="mt-3">
+            <PokemonEditButton PokemonId="@_pokemon.Id" />
     </div>
 </div>
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css
index b29a012..029031a 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css	
@@ -20,6 +20,12 @@
         transform: translateY(-13px);
     }
 
+.card-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
 
 
 .pokemon-name {
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor
index 3ba4b1a..994976c 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor	
@@ -18,9 +18,9 @@
 
 <div class="mt-4">
     <div class="row">
-        @if (PokemonList != null || NatureList == null || SubskillList == null)
+        @if (PokemonList == null || NatureList == null || SubskillList == null)
         {
-            <div class="mt-5">
+            <div class="d-flex justify-content-center align-items-center" style="height: 60vh;">
             <Loading />
             </div>
         }
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor
index 1cd7e72..6de5aaf 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor	
@@ -45,7 +45,7 @@ else
                         <!-- If Variation Pokemon have same PokemonId -->
                         @if(_pokemon.Id != _pokemonVariant.Id)
                         {
-                            <div class="d-flex justify-content-center align-items-center h-100">
+                            <div class="d-flex justify-content-center">
                                     <div class="pokemoncard m-1">
                                         <PokemonCard Pokemon="_pokemon" />
                                     </div>
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css
index cebd416..a9da88b 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css	
@@ -1,4 +1,9 @@
 .pokemoncard {
     width: 100%;
     max-width: 350px;
+    flex: 0 0 auto; /* prevent flex shrink/grow */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.5rem;
 }