Completed tag.html with 1 issue

src/pages/tag.html

@@ -4,12 +4,11 @@ page-header: Tags
 ---
     
 <div class="tags-list">        
-	<div class="tag">Label </div> 
-	<div class="tag">Label <span class="tag-close">{% include ui/modal/close.html %}</span></div>
-	<div class="tag">Label <span class="tag-number">100</span></div>
-	<div class="tag"><span class="badge bg-green ms-auto tag-status"></span> Label</div>
+  	<div class="tag">Label </div> 
+	<div class="tag">Label <span class="tag-close">{% include ui/modal/close.html %}</span></div>     
+	<div class="tag"> Label <span class="tag-badge">{% include ui/badge.html text="100" color="gray" class="ms-2 p-1"  %}</span></div>        
 	<div class="tag"><input class="tag-checkbox" type="checkbox" id="grid-axis-y" ng-model="ctrl.overlayGrid.vertical" ng-change="ctrl.toggleAxis('vertical', ctrl.overlayGrid.vertical)" /> Label</div>
 	<div class="tag"><span class="tag-avatar">{% include ui/avatar.html size="xs" person-id="1" %}</span>label</div>
-	<div class="tag">Label<span>{% include ui/flag.html flag="pl" %}</span>flag</div>      
+	<div class="tag"><span class="tag-flag">{% include ui/flag.html flag="pl" %}</span> Label</div>      
 </div>
- 
\ No newline at end of file
+  
\ No newline at end of file

src/scss/ui/_tag.scss

@@ -10,8 +10,7 @@
         height: 1.5rem;
         border-radius: $border-radius;
         font-size: 1rem;
-        padding-left: .25rem;
-        padding-right: .25rem;
+        padding: 0 .25rem;
         background: $white;
         box-shadow: .06rem .06rem $gray-300;
 
@@ -33,28 +32,35 @@
             }
         }
 
-        .tag-number {
-            margin-left: .5rem;
-        }
-
-
         .tag-checkbox,
         .tag-status,
-        .tag-avatar {
+        .tag-avatar,
+        .tag-flag {
             margin-right: .5rem;
         }
 
-        .tag-avatar {
+        .tag-badge {
             display: flex;
             align-items: center;
             justify-content: center;
-            max-height: .5rem;
 
-            img {
-                height: auto;
+            .badge {
                 max-height: 100%;
-                max-width: 100%;
+                height: 100%;
+                font-size: .5rem;
+            }
+        }
 
+        .tag-avatar,
+        .tag-flag {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            max-height: 1rem;
+
+            img {
+                height: 100%;
+                max-height: 100%;
             }
         }
     }