Add a reusable %tag and use it for the ACL 'tags' ready to use elsewhere

ui-v2/app/styles/components/table.scss

@@ -1,4 +1,9 @@
 @import './icons';
+@import './tag';
+td strong {
+  @extend %tag;
+  background-color: $gray;
+}
 th {
   color: $text-light !important;
 }
@@ -53,12 +58,6 @@ table td a {
 tbody {
   overflow-x: visible !important;
 }
-td strong {
-  display: inline-block;
-  background-color: $gray;
-  padding: 1px 5px;
-  border-radius: $radius-small;
-}
 th,
 td:not(.actions),
 td:not(.actions) a {

ui-v2/app/styles/components/tag.scss

@@ -0,0 +1,5 @@
+%tag {
+  display: inline-block;
+  padding: 1px 5px;
+  border-radius: $radius-small;
+}

ui-v2/app/styles/routes/dc/service/index.scss

@@ -1,8 +1,13 @@
+@import '../../../components/tag';
 html.template-service.template-show main dl {
   display: flex;
   margin-bottom: 1.4em;
 }
-html.template-service.template-show main dt::after {
-  content: ':';
-  margin-right: 0.2em;
+html.template-service.template-show main dt {
+  display: none;
+}
+html.template-service.template-show main dd span {
+  @extend %tag;
+  background-color: $gray;
+  margin-bottom: 0.5em;
 }

ui-v2/app/templates/dc/services/show.hbs

@@ -19,7 +19,9 @@
         <dl>
             <dt>Tags</dt>
             <dd data-test-tags>
-                {{join ', ' item.Tags}}
+              {{#each item.Tags as |item|}}
+                <span>{{item}}</span>
+              {{/each}}
             </dd>
         </dl>
 {{/if}}