From a081c842a66f70b8d131150d8a3ba737dea670a1 Mon Sep 17 00:00:00 2001
From: Chris kerr <chriskerr@gmx.com>
Date: Sat, 27 Apr 2024 19:34:59 -0400
Subject: [PATCH] containerized?

---
 static/js/updateBreedingUsage.js |  2 +-
 templates/app.html               | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/static/js/updateBreedingUsage.js b/static/js/updateBreedingUsage.js
index 45e639a..600a622 100644
--- a/static/js/updateBreedingUsage.js
+++ b/static/js/updateBreedingUsage.js
@@ -28,7 +28,7 @@ function renderOffspringList(usageData) {
 
   // Create and append HTML for each unique offspring
   uniqueOffspringSet.forEach(offspring => {
-      var offspringHTML = `<li class='font-bold text-left marker:text-slate-400 text-purple-300'>
+      var offspringHTML = `<li class='font-bold text-left marker:text-slate-400 text-green-300'>
                           ${offspring}   
                           </li>`;
       offspringContainer.innerHTML += offspringHTML;
diff --git a/templates/app.html b/templates/app.html
index 7bf4f97..5196bd4 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -33,19 +33,21 @@
   >
   </iframe>
 
-  <div class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs">
+  <div
+    class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs container"
+  >
     <div id="monsterFamilyContainer" class="mt-1">
       <!-- Monster Family will be displayed here-->
     </div>
 
-    <div id="monsterStatsContainer" class="mt-2">
+    <div id="monsterStatsContainer" class="container mt-2">
       <!-- Monster stats will be displayed here -->
     </div>
 
-    <div id="monsterSkillsContainer" class="mt-2">
+    <div id="monsterSkillsContainer" class="container mt-2">
       <!-- Monster Skills will be displayed here-->
     </div>
-    <div id="monsterLocationContainer" class="mt-2">
+    <div id="monsterLocationContainer" class="container mt-2">
       <!-- Monster Location will be displayed here-->
     </div>
   </div>
@@ -53,14 +55,14 @@
   <div class="flex m-2 w-full max-w-xl gap-2">
     <div
       id="breedingPairsContainer"
-      class="p-2 border-2 rounded-md border-slate-400 w-full"
+      class="p-2 border-2 rounded-md border-slate-400 w-full container"
     >
       <!-- Breeding pairs will be displayed here -->
     </div>
 
     <div
       id="offspringContainer"
-      class="p-2 border-2 rounded-md border-slate-400 w-full"
+      class="p-2 border-2 rounded-md border-slate-400 w-full container"
     ></div>
   </div>
   <div class="mt-4 text-center">