From 5efe90ff276842b182b0698a21b6156c598ee6c5 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 29 Oct 2022 15:29:50 -0700
Subject: [PATCH] better positioning in clearable badges

---
 .../clearable-badge/clearable-badge.component.html  |  2 +-
 .../clearable-badge/clearable-badge.component.scss  | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
index 64727e0d8..57b3ba39a 100644
--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
@@ -1,4 +1,4 @@
-<button *ngIf="active" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-circle p-1" title="Clear" i18n-title (click)="onClick($event)">
+<button *ngIf="active" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
     <svg *ngIf="!isNumbered && selected" width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
     </svg>
diff --git a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss
index 14ca3fd2b..68f6478c4 100644
--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss
@@ -1,6 +1,6 @@
 .badge {
-    width: 20px;
-    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
 }
 
 .x {
@@ -8,18 +8,21 @@
 }
 
 .number {
-    width: 1em;
-    height: 1em;
+    min-width: 1em;
+    min-height: 1em;
     display: inline-block;
 }
 
 button:hover {
     .check,
     .number {
-        display: none;
+        opacity: 0 !important;
     }
 
     .x {
         display: inline-block;
+        position: absolute;
+        top: 5px;
+        left: calc(50% - 4px);
     }
 }