[PM-16191] - fix popup width when opening in popped out mode

[jaasen-livefront]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-16191

📔 Objective

Fix pop-out windows ignoring the user's configured popup width setting (Narrow/Default/Wide). Pop-outs always opened at 480px regardless of the setting.

Root causes fixed

1. openPopout ignored the stored width setting

BrowserPopupUtils.openPopout used Math.max(480, document.body.clientWidth) to determine the window width. In the popup context this always resolved to 480 (the default), and in background/service-worker contexts document is undefined entirely. Replaced with a new getPopupWidth() helper that:

• In popup context: reads the cached value from localStorage (key bw-popup-width)
• In background/service-worker context (autofill overlay, FIDO2, context menu, notification bar): reads from chrome.storage.local using the state framework key global_popupStyle_popup-width, correctly deserializing the { "__json__": true, value: '"narrow"' } wrapper the state framework uses

This fixes all pop-out entry points:

• The pop-out button in the popup toolbar
• Autofill inline menu (selecting a credential)
• Autofill notification bar (add/edit prompt)
• Context menu autofill
• FIDO2 / passkey dialogs

2. Body width defaulted to 480px inside the opened window

tailwind.css hardcoded body { width: 480px }. Changed to width: 100% so the body fills the Chrome window (which is already sized correctly by openPopout). PopupSizeService.setStyle continues to override document.body.style.width with the correct pixel value for the regular browser action popup.

3. popup-size.service.ts duplicate key constant

PopupSizeService.LocalStorageKey was a private duplicate of the string "bw-popup-width". Updated to reference the exported POPUP_WIDTH_STORAGE_KEY constant from browser-popup-utils.ts.

📸 Screenshots

Inline Menu and Passkey popout

Screen.Recording.2026-04-15.at.11.25.51.AM.mov

Manual popout

Screen.Recording.2026-04-14.at.5.20.00.PM.mov

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 47.00%. Comparing base (d4d52af) to head (86deb1b).
⚠️ Report is 12 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #20188      +/-   ##
==========================================
+ Coverage   46.94%   47.00%   +0.06%     
==========================================
  Files        3888     3889       +1     
  Lines      117102   117271     +169     
  Branches    17905    17940      +35     
==========================================
+ Hits        54970    55120     +150     
- Misses      59652    59672      +20     
+ Partials     2480     2479       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Checkmarx One – Scan Summary & Details – 8dbda959-73c0-4f0b-8dac-962da5afd166

---

New Issues (1)

Checkmarx found the following issues in this Pull Request

#	Severity	Issue	Source File / Package	Checkmarx Insight
1		CVE-2026-27959	Npm-koa-3.1.1	details Recommended version: 3.1.2 Description: Koa is middleware for Node.js using ES2017 async functions. Prior to versions 2.16.4 and 3.x prior to 3.1.2, Koa's `ctx.hostname` API performs naiv... Attack Vector: NETWORK Attack Complexity: LOW Vulnerable Package