From 4155e26c28299beb112cbcce9313a614c62589f6 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Thu, 4 Dec 2025 10:44:04 -0500
Subject: [PATCH] [PM-18839] Use mono font for color password component
 (#17785)

---
 libs/components/src/color-password/color-password.component.ts | 2 +-
 libs/components/src/color-password/color-password.stories.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/color-password/color-password.component.ts b/libs/components/src/color-password/color-password.component.ts
index bd7f3beb403..eaaefd29f1d 100644
--- a/libs/components/src/color-password/color-password.component.ts
+++ b/libs/components/src/color-password/color-password.component.ts
@@ -14,7 +14,7 @@ type CharacterType = "letter" | "emoji" | "special" | "number";
 @Component({
   selector: "bit-color-password",
   template: `@for (character of passwordCharArray(); track $index; let i = $index) {
-    <span [class]="getCharacterClass(character)">
+    <span [class]="getCharacterClass(character)" class="tw-font-mono">
       <span>{{ character }}</span>
       @if (showCount()) {
         <span class="tw-whitespace-nowrap tw-text-xs tw-leading-5 tw-text-main">{{ i + 1 }}</span>
diff --git a/libs/components/src/color-password/color-password.stories.ts b/libs/components/src/color-password/color-password.stories.ts
index 65b6a3c0f18..2ed5cdc4b8d 100644
--- a/libs/components/src/color-password/color-password.stories.ts
+++ b/libs/components/src/color-password/color-password.stories.ts
@@ -4,7 +4,7 @@ import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for
 
 import { ColorPasswordComponent } from "./color-password.component";
 
-const examplePassword = "Wq$Jk😀7jlI  DX#rS5Sdi!z ";
+const examplePassword = "Wq$Jk😀7jlI  DX#rS5Sdi!z0O ";
 
 export default {
   title: "Component Library/Color Password",