Made some responsive styling changes.

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: 0.25rem;
-    padding: 4px 8px;
     border-radius: 30px;
+    color: white;
+    font-size: clamp(0.7rem, 1vw, 0.9rem);
+    text-align: center;
+    white-space: nowrap;
 }
 
 .statText {
-    position: relative;
+    margin: 0;
-    top: 50%;
+    padding: 0;
-    left: 50%;
+    width: 100%;
-    transform: translate(-50%, -50%);
+    text-align: center;
-    font-size: .8rem;
 }
 
 /* Sleep Type Badge Styling */

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)">
+<div class="card-wrapper d-flex flex-column align-items-center">
-    <!-- Pokemon Name, Number, and Type -->
+    <div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
-    <div class="z-3">
+        <!-- Pokemon Name, Number, and Type -->
-        @if (_pokemon.IsVariation) 
+        <div class="z-3">
-        {
+            @if (_pokemon.IsVariation) 
-            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
+            {
-        }
+                <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
-        else 
+            }
-        { 
+            else 
-            <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div> 
+            { 
-        }
+                <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="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="mt-3">
-    <div class="flip-container z-1" @onclick="() => ToggleImage()">
+            <PokemonEditButton PokemonId="@_pokemon.Id" />
-        <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>
 </div>

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 {

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor

@@ -6,11 +6,11 @@
 @rendermode InteractiveServer
 
 <!-- Table A: Desktop View-->
-<div class="container d-none d-md-block">
+<div class="container d-none d-md-block ">
     <!-- Main UI -->
     <div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
         <!-- Table Header -->
-        <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
+        <div class="row card-header bg-secondary bg-gradient py-3 border-0">
             <div class="flex-row justify-content-between">
                 <div class="text-center position-relative">
                     <input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
@@ -22,7 +22,7 @@
         </div>
 
         
-        <div class="tableFixHead table-responsive row">
+        <div class="tableFixHead bg-secondary table-responsive row">
             <table class="table col table-borderless border-0 table-secondary table-striped align-middle">
                 <!-- Table Head -->
                 <thead class="">
@@ -47,6 +47,7 @@
                 {
                     <!-- Table Body -->
                     <tbody>
+                        <tr></tr>
                         @foreach (var pokemon in FilteredPokemon)
                         {
                             <tr class="flex-row">
@@ -176,8 +177,8 @@
                                 <!-- Stats -->
                                 <div class="d-flex flex-wrap align-items-center gap-2">
                                     <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
-                                    <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
+                                        <PokemonBadge BadgeItem="@pokemon.SleepType" />
-                                    <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
+                                        <PokemonBadge BadgeItem="@pokemon.Speciality" />
                                 </div>
                             </div>
 

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>
         }

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>

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;
 }