[PM-2014] fix: misaligned badge

apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html

@@ -1,8 +1,22 @@
 <h2 bitTypography="h2">
   {{ "loginWithPasskey" | i18n }}
   <ng-container *ngIf="hasData">
-    <span *ngIf="hasCredentials" bitBadge badgeType="success">{{ "on" | i18n }}</span>
-    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary">{{ "off" | i18n }}</span>
+    <span
+      *ngIf="hasCredentials"
+      class="tw-align-middle"
+      bitBadge
+      badgeType="success"
+      align="middle"
+      >{{ "on" | i18n }}</span
+    >
+    <span
+      *ngIf="!hasCredentials"
+      class="tw-align-middle"
+      bitBadge
+      badgeType="secondary"
+      align="middle"
+      >{{ "off" | i18n }}</span
+    >
   </ng-container>
   <ng-container *ngIf="loading">
     <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>

libs/components/src/badge/badge.directive.ts

@@ -31,7 +31,6 @@ export class BadgeDirective {
       "tw-px-1.5",
       "tw-font-bold",
       "tw-text-center",
-      "tw-align-text-top",
       "!tw-text-contrast",
       "tw-rounded",
       "tw-border-none",
@@ -46,7 +45,8 @@ export class BadgeDirective {
     ]
       .concat(styles[this.badgeType])
       .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
-      .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
+      .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : [])
+      .concat([`tw-align-${this.align}`]);
   }
   @HostBinding("attr.title") get title() {
     return this.truncate ? this.el.nativeElement.textContent.trim() : null;
@@ -54,6 +54,7 @@ export class BadgeDirective {
 
   @Input() badgeType: BadgeTypes = "primary";
   @Input() truncate = true;
+  @Input() align = "text-top";
 
   private hasHoverEffects = false;
 

libs/components/src/badge/badge.stories.ts

@@ -15,6 +15,7 @@ export default {
   args: {
     badgeType: "primary",
     truncate: false,
+    align: "text-top",
   },
   parameters: {
     design: {