profile to show the max number at proper place in bar (#50)

- profile to show the max number at proper place in bar (a556baa1e7b4bc084164752e37acd1ed32b0860d)


Co-authored-by: Aanya Choudhary <TheFrogGod@users.noreply.huggingface.co>

web/profile.html

@@ -409,15 +409,30 @@
 
           barContainer.appendChild(bar);
 
-          const minMaxDiv = document.createElement("div");
-          minMaxDiv.className = "min-max-labels";
-          const minLabel = document.createElement("span");
-          minLabel.textContent = "Min: " + m.min;
-          const maxLabel = document.createElement("span");
-          maxLabel.textContent = "Max: " + m.max;
-          minMaxDiv.appendChild(minLabel);
-          minMaxDiv.appendChild(maxLabel);
-          barContainer.appendChild(minMaxDiv);
+const minMaxDiv = document.createElement("div");
+minMaxDiv.className = "min-max-labels relative w-full";
+
+const minLabel = document.createElement("span");
+minLabel.textContent = "Min: " + m.min;
+minLabel.style.position = "absolute";
+minLabel.style.left = "0";
+
+const maxLabel = document.createElement("span");
+maxLabel.textContent = "Max: " + m.max;
+maxLabel.style.position = "absolute";
+
+// put the max label at the end of the green section
+let maxPercent = 100;
+if (m.value > m.max) {
+  maxPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+}
+maxLabel.style.left = maxPercent + "%";
+maxLabel.style.transform = "translateX(-100%)"; // anchor it properly
+
+minMaxDiv.appendChild(minLabel);
+minMaxDiv.appendChild(maxLabel);
+barContainer.appendChild(minMaxDiv);
+
 
           card.appendChild(barContainer);
           container.appendChild(card);