From 0b316a3b4b1822a94b71f1f458d1d0858fb5a043 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Fri, 13 Jun 2025 15:27:14 -0400
Subject: [PATCH] STOP BEING ON MASTER. Anyways made the temp blanket
 visualizer fit in a bootstrap grid :)

---
 .../TemperatureBlanketVisualizer.razor        | 29 +++++++++++--------
 .../TemperatureBlanketVisualizer.razor.css    |  9 ++++++
 .../TemperatureRangeEditor.razor              |  4 +--
 .../Pages/Crochet Pages/CrochetHome.razor     |  2 +-
 4 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.css

diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor
index 62ef8d5..c4af1e8 100644
--- a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor	
@@ -9,21 +9,26 @@
     else
     {
 
-        <div class="">
-            <h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
+        <h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
 
-            <div class="d-flex"> 
-                <div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
-                    @foreach (var day in TemperatureDays)
-                    {
-                        var color = GetColorForTemp(day.AvgTemp);
-                        <div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
-                             title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
+        <div>
+            <div class="row">
+                <div class="col-10">
+                    <div class="d-flex">
+                        <div class="temperature-blanket">
+                            @foreach (var day in TemperatureDays)
+                            {
+                                var color = GetColorForTemp(day.AvgTemp);
+                                <div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
+                                     title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
+                                </div>
+                            }
                         </div>
-                    }
+                    </div>
+                </div>
+                <div class="col">
+                    <TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
                 </div>
-
-                <TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" /> 
             </div>
         </div>
     }
diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.css b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.css
new file mode 100644
index 0000000..cdcf89d
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.css	
@@ -0,0 +1,9 @@
+body {
+}
+
+.temperature-blanket {
+    display: flex;
+    overflow-x: auto;
+    background-color: black;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor
index 69be82c..400522d 100644
--- a/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor	
@@ -22,7 +22,7 @@
     } *@
 
     <!-- Color pickers for each range -->
-    <div class="card rounded-3 w-50 mx-auto">
+    <div class="card rounded-3">
         <div class="card-header mb-3 text-center fw-bold">
             Temperature Blanket Colors
         </div>
@@ -76,7 +76,7 @@
                 </div>
             } *@
 
-            <div class="row align-items-center mb-2">
+            <div class="row align-items-center mb-2 ms-1">
                 <div class="col-6 text-end pe-2">
                     <label class="form-label mb-0">
                         @TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
diff --git a/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor b/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor
index 38c1ee1..2ee5460 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor	
+++ b/Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor	
@@ -9,7 +9,7 @@
 </head>
 
 <h3 class="text-xl font-bold mb-4">Crochet</h3>
-<div class="container">
+<div class="">
 <TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
 
 </div>