[ui] Makes service tags wrap and look like tag items (#14834)

* Makes service tags wrap and look like tag items

* Add a little vertical spacing and changelog

* Put client before tags

* Force tags list to new line

.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
+```

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>

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;