From 2f210a0e1a5a0ed1efb8e1c921529504b4c5a3e0 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Wed, 24 Sep 2025 15:13:20 -0400
Subject: [PATCH] Fixed the PokemonSelector visual issue where filtered pokemon
 appear super spaced out; now they appear naturally. Additional changes are
 just removing minor things.

---
 .../Pokemon Components/PokemonSelector.razor  |  6 ++---
 .../PokemonSelector.razor.css                 |  4 ++-
 .../Pokemon Components/PokemonTable.razor     | 26 ++++++++-----------
 .../Pokemon Pages/PokemonCreate.razor.cs      | 18 ++++++-------
 4 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor
index f39567f..6556e2a 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor	
@@ -1,16 +1,16 @@
 
 <!-- Search Input -->
 <div class="pokemon-selector p-3 bg-light">
-    <input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
+    <input class="form-control mb-3 rounded rounded-5" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
 
     <!-- Scrollable Pokémon Grid -->
-    <div class="row pokemon-grid">
+    <div class="row pokemon-grid pt-1">
         @foreach (var pokemon in FilteredPokemon)
         {
             bool isSelected = SelectedPokemon?.Id == pokemon.Id;
 
             <div class="col-6 col-md-3 mb-3">
-                <div class="card pokemon-card small-card @(isSelected ? "border-primary border-2 shadow" : "border-2 border-white")"
+                <div class="card pokemon-card small-card @(isSelected ? "border-primary border-2 shadow" : "border-2 border-white") rounded rounded-3"
                      @onclick="() => SelectPokemon(pokemon)">
                     <img src="@pokemon.PokemonImageUrl" class="card-img-top" style="height: 50px; object-fit: contain;" />
                     <div class="card-body p-2 text-center">
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css
index 5fb9b87..6630efc 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css	
@@ -5,11 +5,13 @@
     border-radius: 5% / 3.5%;
     display: flex;
     flex-direction: column;
+    
 }
 
 .pokemon-grid {
     flex: 1 1 auto;
     overflow-y: auto;
+    align-content: flex-start;  
 }
 
 
@@ -19,7 +21,7 @@
 }
 
 .pokemon-card:hover {
-    transform: scale(1.05);
+    transform: scale(1.13);
 }
 
 .small-card {
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 69046d6..1eca116 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -5,10 +5,7 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="d-flex justify-content-end">
 
-    
-</div>
 <!-- Table A: Desktop View-->
 <div class="container d-none d-md-block" style="height: 70vh;">
     <!-- Main UI -->
@@ -43,8 +40,8 @@
         <div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
             <table class="table table-borderless border-0 table-secondary table-striped align-middle">
                 <!-- Table Head -->
-                <thead class="">
-                    <tr class="">
+                <thead>
+                    <tr>
                         <th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
                         <th class="text-white text-bg-info col-1" scope="col">#</th>
                         <th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
@@ -68,7 +65,7 @@
                 else
                 {
                     <!-- Table Body -->
-                    <tbody class="">
+                    <tbody>
                         <tr></tr>
                         @if (FilteredPokemon != null && FilteredPokemon.Any())
                         {
@@ -104,7 +101,7 @@
                                     </td>
 
                                     <!-- Section 2: Pokemon # -->
-                                    <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
+                                    <th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
 
 
                                     <!-- Section 3: Pokemon Name -->
@@ -114,21 +111,21 @@
 
 
                                     <!-- Section 4: Pokemon Type -->
-                                    <td class="">
+                                    <td>
                                         <div class="d-flex justify-content-center">
                                             <img src="@GetTypeImageUrl(pokemon.PokemonType)"  style="width:36px; height:36px;" />
                                         </div>
                                     </td>
 
                                     <!-- Section 5: Sleep Type -->
-                                    <td class="" style="">
+                                    <td>
                                         <div class="d-flex justify-content-center ">
                                             <PokemonBadge BadgeItem="@pokemon.SleepType" />
                                         </div>
                                     </td>
 
                                     <!-- Section 6: Speciality -->
-                                    <td class="" style="">
+                                    <td>
                                         <div class="d-flex justify-content-center">
                                             <PokemonBadge BadgeItem="@pokemon.Speciality" />
 
@@ -137,11 +134,10 @@
 
                                     @if (adminToggle)
                                     {
-                                        <td class="" style="">
+                                        <td>
                                             <div class="d-flex justify-content-center">
                                                 <PokemonEditButton PokemonId="@pokemon.PokemonId" />
                                                 @*<button @onclick="() => ConfirmDelete(pokemon.Id)">Delete</button>*@
-                                                
                                             </div>
                                         </td>
                                     }
@@ -204,10 +200,10 @@
                 @foreach (var pokemon in pokemons)
                 {
                     <tr class="border-0">
-                        <div class="d-flex align-items-center">
+                            <div class="d-flex align-items-center" style="border: 1px dashed hotpink;">
 
                             <!-- Pokemon Image -->
-                            <div class="me-3">
+                                <div class="me-3" style="border: 1px dashed hotpink;">
                                 <div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
                                     <div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
                                         <img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
@@ -219,7 +215,7 @@
                                 </div>
                             </div>
 
-                            <div class="">
+                                <div style="border: 1px dashed hotpink;">
                                 <!-- Number and Name -->
                                 <h5>
                                     @pokemon.PokemonId -
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs
index 5377985..554cd80 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs	
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs	
@@ -60,32 +60,32 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
              */
             if (!pokemon2FormView && !pokemon3FormView) 
             {
-                if(IsComplete(pokemon1))
-                {
+                //if(IsComplete(pokemon1))
+                //{
                     await HandleSubmit(pokemon1);
                     Navigation.NavigateTo("/pokemon");
-                }
+                //}
             }
             else if (pokemon2FormView)
             {
-                if (IsComplete(pokemon1) && IsComplete(pokemon2))
-                {
+                //if (IsComplete(pokemon1) && IsComplete(pokemon2))
+                //{
                     await HandleSubmit(pokemon1);
                     await HandleSubmit(pokemon2);
                     Navigation.NavigateTo("/pokemon");
 
-                }
+               // }
             }
             else if (pokemon3FormView)
             {
-                if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
-                {
+                //if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
+                //{
                     await HandleSubmit(pokemon1);
                     await HandleSubmit(pokemon2);
                     await HandleSubmit(pokemon3);
                     Navigation.NavigateTo("/pokemon");
 
-                }
+                //}
             }
 
         }