From bc07f56c975fc45f81aa45b389c6b5ee17a8d950 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Thu, 4 Sep 2025 13:27:28 -0400
Subject: [PATCH] Pokemon Download button fits better.

---
 .../Pokemon Components/PokemonDownload.razor  |  4 +--
 .../Pokemon Components/PokemonTable.razor     | 28 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor
index 0962c2f..4b8e9a7 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor	
@@ -1,8 +1,8 @@
 @inject IJSRuntime JS
 
 <div class="">
-    <button class="btn btn-primary mt-1 p-2 rounded rounded-5 align-self-start text-white " @onclick="DownloadPokemonJson">
-        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
+    <button class="btn btn-sm btn-primary p-1 rounded rounded-5 align-self-start text-white " @onclick="DownloadPokemonJson">
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
             <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z" />
         </svg>
     </button>
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 24bfa6c..7779a51 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -5,9 +5,9 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="d-flex justify-content-end mb-2">
+<div class="d-flex justify-content-end">
 
-    <PokemonDownload _Pokemon="pokemons" />
+    
 </div>
 <!-- Table A: Desktop View-->
 <div class="container d-none d-md-block " style="height: 70vh;">
@@ -15,14 +15,27 @@
     <div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable  ">
         <!-- Table Header -->
         <div class="row 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" />
+            <div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
 
-                    <h2 class="text-white text-decoration-underline">Available Pokémon</h2>
-                    <div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
+                <!-- Left: Search -->
+                <input class="form-control w-25 me-3"
+                       placeholder="Search Pokémon..."
+                       @bind="SearchTerm"
+                       @oninput="HandleSearch" />
 
+                <!-- Center: Title -->
+                <h2 class="text-white text-decoration-underline mb-0 position-absolute start-50 translate-middle-x">
+                    Available Pokémon
+                </h2>
+
+                <!-- Right: Count + Download -->
+                <div class="d-flex align-items-center gap-2">
+                    <div class="badge bg-info">
+                        <p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
+                    </div>
+                    <PokemonDownload _Pokemon="pokemons" />
                 </div>
+
             </div>
         </div>
 
@@ -151,6 +164,7 @@
                
 
             </table>
+
         </div>
         <!-- Wrap in Auth -->
         <div class="d-flex justify-content-end mt-1">