[PM-2014] fix: badge alignment using important statement

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

@@ -1,10 +1,10 @@
 <h2 bitTypography="h2">
   {{ "loginWithPasskey" | i18n }}
   <ng-container *ngIf="hasData">
-    <span *ngIf="hasCredentials" bitBadge badgeType="success" align="middle">{{
+    <span *ngIf="hasCredentials" bitBadge badgeType="success" class="!tw-align-middle">{{
       "on" | i18n
     }}</span>
-    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" align="middle">{{
+    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary" class="!tw-align-middle">{{
       "off" | i18n
     }}</span>
   </ng-container>

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

@@ -20,19 +20,6 @@ const hoverStyles: Record<BadgeTypes, string[]> = {
   info: ["hover:tw-bg-info-700"],
 };
 
-const textAlignment = {
-  baseline: "tw-align-baseline",
-  sub: "tw-align-sub",
-  super: "tw-align-super",
-  textTop: "tw-align-text-top",
-  textBottom: "tw-align-text-bottom",
-  middle: "tw-align-middle",
-  top: "tw-align-top",
-  bottom: "tw-align-bottom",
-};
-
-type TextAlignment = keyof typeof textAlignment;
-
 @Directive({
   selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
 })
@@ -44,7 +31,7 @@ export class BadgeDirective {
       "tw-px-1.5",
       "tw-font-bold",
       "tw-text-center",
-      textAlignment[this.align],
+      "tw-align-text-top",
       "!tw-text-contrast",
       "tw-rounded",
       "tw-border-none",
@@ -67,7 +54,6 @@ export class BadgeDirective {
 
   @Input() badgeType: BadgeTypes = "primary";
   @Input() truncate = true;
-  @Input() align: TextAlignment = "textTop";
 
   private hasHoverEffects = false;
 

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

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