From d4d73674fced54570db111574dae0a080f89ce77 Mon Sep 17 00:00:00 2001
From: jeremystretch <jstretch@ns1.com>
Date: Mon, 1 Aug 2022 11:54:39 -0400
Subject: [PATCH] Fixes #9871: Fix utilization graph value alignments

---
 docs/release-notes/version-3.2.md             |  1 +
 .../templates/helpers/utilization_graph.html  | 34 ++++++++-----------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/docs/release-notes/version-3.2.md b/docs/release-notes/version-3.2.md
index 64e229129..5e538890c 100644
--- a/docs/release-notes/version-3.2.md
+++ b/docs/release-notes/version-3.2.md
@@ -14,6 +14,7 @@
 
 ### Bug Fixes
 
+* [#9871](https://github.com/netbox-community/netbox/issues/9871) - Fix utilization graph value alignments
 * [#9884](https://github.com/netbox-community/netbox/issues/9884) - Prevent querying assigned VRF on prefix object init
 * [#9885](https://github.com/netbox-community/netbox/issues/9885) - Fix child prefix counts when editing/deleting aggregates in bulk
 * [#9891](https://github.com/netbox-community/netbox/issues/9891) - Ensure consistent ordering for tags during object serialization
diff --git a/netbox/utilities/templates/helpers/utilization_graph.html b/netbox/utilities/templates/helpers/utilization_graph.html
index 08e4e6f8a..2a1856abf 100644
--- a/netbox/utilities/templates/helpers/utilization_graph.html
+++ b/netbox/utilities/templates/helpers/utilization_graph.html
@@ -1,21 +1,15 @@
-{% if utilization == 0 %}
-  <div class="progress align-items-center justify-content-center">
-    <span class="w-100 text-center">{{ utilization }}%</span>
+<div class="progress">
+  <div
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    aria-valuenow="{{ utilization }}"
+    class="progress-bar {{ bar_class }}"
+    style="width: {{ utilization }}%;"
+  >
+    {% if utilization >= 25 %}{{ utilization|floatformat:1 }}%{% endif %}
   </div>
-{% else %}
-  <div class="progress">
-    <div
-      role="progressbar"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      aria-valuenow="{{ utilization }}"
-      class="progress-bar {{ bar_class }}"
-      style="width: {{ utilization }}%;"
-    >
-      {% if utilization >= 25 %}{{ utilization|floatformat }}%{% endif %}
-    </div>
-    {% if utilization < 25 %}
-      <span class="ps-1">{{ utilization|floatformat }}%</span>
-    {% endif %}
-  </div>
-{% endif %}
+  {% if utilization < 25 %}
+    <span class="ps-1">{{ utilization|floatformat:1 }}%</span>
+  {% endif %}
+</div>