From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 29 Oct 2022 22:29:50 +0000 (-0700)
Subject: better positioning in clearable badges
X-Git-Tag: v1.10.0-beta.rc1~1^2~28^2
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F1886%2Fhead;p=thirdparty%2Fpaperless-ngx.git

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 64727e0d85..57b3ba39a4 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 14ca3fd2b8..68f6478c4b 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);
     }
 }