clients [PM-22472] Fix word-breaking in passphrase display for generator and history

🎟️ Tracking

PM-20507 Fixes https://github.com/bitwarden/clients/issues/14376

📔 Objective

Ensure passphrases are wrapped only at word separators ('-', ' ', '?') to avoid splitting words across lines. Improves readability in both the generator screen and history, in the Extension and Web Vault.

📸 Screenshots

⏰ Reminders before review

Contributor guidelines followed
All formatters and local linters executed and passed
Written new unit and / or integration tests where applicable
Protected functional changes with optionality (feature flags)
Used internationalization (i18n) for all UI strings
CI builds passed
Communicated to DevOps any deployment requirements
Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

👍 (:+1:) or similar for great changes
📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
❓ (:question:) for questions
🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
🎨 (:art:) for suggestions / improvements
❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
⛏ (:pick:) for minor or nitpick changes

Jun 07 '25 13:06 Manolachi

Thank you for your contribution! We've added this to our internal Community PR board for review. ID: PM-22472 Link: https://bitwarden.atlassian.net/browse/PM-22472

Details on our contribution process can be found here: https://contributing.bitwarden.com/contributing/pull-requests/community-pr-process.

Jun 07 '25 15:06 bitwarden-bot

👍🏻 Hi @Manolachi, thank you for your contribution!

🤔 Generator output display is a nuanced feature. Your PR doesn't account for issues like passphrases with alphanumeric separators, long passwords, and other edge-cases. I'm working to come up with a plan to add those things to this PR.

❓ Do you have the time to invest in a more comprehensive solution?

Jun 13 '25 16:06 audreyality

Hey Audrey, thank you for the review, I appreciate it!

You're right, this is about as far as we can get with just CSS changes. I'd be happy to get involved and help work toward a more complete solution. Can you please clarify what edge-cases you have in mind?

Jun 13 '25 18:06 ManolachiAndrei

Can you please clarify what edge-cases you have in mind?

I talked to @willmartian and he noted that the changes aren't as extensive as I thought.

I'd like this fix to apply to all generators, not just the passphrase and password ones. The lift is essentially porting your changes from this PR onto one that introduces a single output component. I have it sitting on my local and will push it up soon.

This PR can still merge, we just scope it down to the component library changes. The class updates for the generator components move to the new PR.

Jun 16 '25 13:06 audreyality

Checkmarx One – Scan Summary & Details – f13de9b1-5b23-4941-94a1-9084c3be61fd