diff --git a/.changelog/14832.txt b/.changelog/14832.txt
new file mode 100644
index 000000000..a55c8b673
--- /dev/null
+++ b/.changelog/14832.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes an issue where service tags would bleed past the edge of the screen
+```
diff --git a/ui/app/components/allocation-service-sidebar.hbs b/ui/app/components/allocation-service-sidebar.hbs
index 21f69a851..a60488d21 100644
--- a/ui/app/components/allocation-service-sidebar.hbs
+++ b/ui/app/components/allocation-service-sidebar.hbs
@@ -65,14 +65,6 @@
 							{{this.address}}
 						</a>
 					</span>
-					{{#if @service.tags.length}}
-						<span class="pair">
-							<span class="term">
-								Tags
-							</span>
-							{{join ", " @service.tags}}
-						</span>
-					{{/if}}
 					<span class="pair">
 						<span class="term">
 							Client
@@ -85,9 +77,17 @@
 								{{@allocation.node.shortId}}
 							</LinkTo>
 						</Tooltip>
-
 					</span>
-
+					{{#if @service.tags.length}}
+						<span class="pair is-wrappable">
+							<span class="term">
+								Tags
+							</span>
+              {{#each @service.tags as |tag|}}
+                <span class="tag">{{tag}}</span>
+              {{/each}}
+						</span>
+					{{/if}}
 				</div>
 			</div>
 		</div>
diff --git a/ui/app/styles/components/inline-definitions.scss b/ui/app/styles/components/inline-definitions.scss
index 97b398d9c..11d4f6a01 100644
--- a/ui/app/styles/components/inline-definitions.scss
+++ b/ui/app/styles/components/inline-definitions.scss
@@ -17,6 +17,14 @@
     margin-right: 2em;
     white-space: nowrap;
 
+    &.is-wrappable {
+      white-space: normal;
+      display: block;
+      .tag {
+        vertical-align: middle;
+      }
+    }
+
     .term {
       font-weight: $weight-semibold;
       margin-right: 0.5em;