better positioning in clearable badges

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 64727e0d8515f57e474807fbeae96bbacf5ffc17..57b3ba39a4343ac9f85ac364c396d942a6aaba9f 100644 (file)
--- 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 14ca3fd2b8e8fe6c3ba1388437200ac8bd1a4ee4..68f6478c4baf30ad3ec92df7266454eed8c627ce 100644 (file)
--- 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);
     }
 }