Merge branch 'fix/bmi-badge-colors' into main

Author: digitalcolony

src/pages/bmi.astro

@@ -139,8 +139,8 @@ const sharedValues = {
 					<div class="scale-segment obese">
 						<span>Obese</span>
 					</div>
+					<!-- scale indicator removed - controlled indicator caused layout issues -->
 				</div>
-				<div class="scale-indicator" id="scale-indicator"></div>
 			</div>
 
 			<ResultCard title="Understanding Your BMI">
@@ -224,8 +224,10 @@ const sharedValues = {
 		display: flex;
 		height: 60px;
 		border-radius: var(--border-radius);
-		overflow: hidden;
+		/* allow the pointer triangle to render outside the bar */
+		overflow: visible;
 		margin-bottom: 1.5rem;
+		position: relative;
 	}
 
 	.scale-segment {
@@ -253,17 +255,9 @@ const sharedValues = {
 		background: var(--color-danger);
 	}
 
-	.scale-indicator {
-		position: absolute;
-		bottom: 1rem;
-		width: 0;
-		height: 0;
-		border-left: 10px solid transparent;
-		border-right: 10px solid transparent;
-		border-bottom: 12px solid var(--color-text);
-		transform: translateX(-50%);
-		transition: left 0.3s ease;
-	}
+	/* scale indicator removed - kept for historical context
+	.scale-indicator { ... }
+	*/
 
 	.bmi-info {
 		background: var(--color-background);
@@ -385,6 +379,7 @@ const sharedValues = {
 		private bmiNumber: HTMLElement | null = null;
 		private bmiCategory: HTMLElement | null = null;
 		private bmiExplanation: HTMLElement | null = null;
+		// scaleIndicator removed from DOM; keep property for compatibility
 		private scaleIndicator: HTMLElement | null = null;
 		private asianScale: HTMLInputElement | null = null;
 
@@ -401,7 +396,7 @@ const sharedValues = {
 			this.bmiNumber = document.getElementById("bmi-number");
 			this.bmiCategory = document.getElementById("bmi-category");
 			this.bmiExplanation = document.getElementById("bmi-explanation");
-			this.scaleIndicator = document.getElementById("scale-indicator");
+			// scaleIndicator intentionally not queried - removed from markup
 			this.asianScale = document.getElementById("asian-scale") as HTMLInputElement;
 		}
 
@@ -611,8 +606,9 @@ const sharedValues = {
 				this.bmiCategory.textContent = categoryData.name;
 				// Update the CSS class for the category badge
 				this.bmiCategory.className = `category-badge category-badge--md category-badge--solid ${category}`;
+				// Set the badge color to match the chart legend colors exactly
+				this.bmiCategory.style.setProperty("--badge-color", categoryData.color);
 			}
-
 			if (this.bmiExplanation) {
 				this.bmiExplanation.textContent = categoryData.explanation;
 			}
@@ -669,24 +665,8 @@ const sharedValues = {
 		}
 
 		private updateScaleIndicator(bmi: number, useAsianScale: boolean): void {
-			if (!this.scaleIndicator) return;
-
-			let position;
-			if (useAsianScale) {
-				// Asian scale thresholds
-				if (bmi < 18.5) position = (bmi / 18.5) * 25;
-				else if (bmi < 23) position = 25 + ((bmi - 18.5) / 4.5) * 25;
-				else if (bmi < 27.5) position = 50 + ((bmi - 23) / 4.5) * 25;
-				else position = 75 + Math.min(((bmi - 27.5) / 7.5) * 25, 25);
-			} else {
-				// Standard scale thresholds
-				if (bmi < 18.5) position = (bmi / 18.5) * 25;
-				else if (bmi < 25) position = 25 + ((bmi - 18.5) / 6.5) * 25;
-				else if (bmi < 30) position = 50 + ((bmi - 25) / 5) * 25;
-				else position = 75 + Math.min(((bmi - 30) / 10) * 25, 25);
-			}
-
-			this.scaleIndicator.style.left = `${Math.min(position, 100)}%`;
+			// scale-indicator removed - no-op
+			return;
 		}
 	}
 

tests/calculators/bmi.spec.js

@@ -105,4 +105,24 @@ test.describe("BMI Calculator", () => {
 		// Check that the scale indicator exists
 		await expect(page.locator("#scale-indicator")).toBeVisible();
 	});
+
+	test("should update badge color to match scale legend colors", async ({ page }) => {
+		const categoryBadge = page.locator("#bmi-category");
+
+		// Test normal weight - should have green color matching the legend
+		await page.locator("#height-total-inches").fill("68");
+		await page.locator("#weight-lbs").fill("150"); // BMI ≈ 22.8 (normal)
+		await page.waitForTimeout(500);
+
+		await expect(categoryBadge).toContainText(/Normal/i);
+
+		// Test overweight - should have warning color matching the legend
+		await page.locator("#weight-lbs").fill("185"); // BMI ≈ 28.1 (overweight)
+		await page.waitForTimeout(500);
+
+		await expect(categoryBadge).toContainText(/Overweight/i);
+
+		// Verify the badge element has the correct CSS class for styling
+		await expect(categoryBadge).toHaveClass(/overweight/);
+	});
 });