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,6 +1,7 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
+<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">
@@ -43,7 +44,7 @@
         </div>
 
         <!-- Pokemon Sleep Type and Specialty Badges -->
-    <div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
+        <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" />
@@ -52,9 +53,7 @@
 
     </div>
 
-<div class="mt-5 position-relative">
+    <div class="mt-3">
-    <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

@@ -10,7 +10,7 @@
     <!-- 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;
 }