[CL-508] extension width setting

[willmartian]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/CL-508

📔 Objective

Adds an setting to the extension for configuring the popup's width. 🚀

📸 Screenshots

Screen.Recording.2024-11-18.at.2.02.56.PM.mov

⏰ 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

[github-actions]

Checkmarx One – Scan Summary & Details – 837521b4-c5b8-4cfb-8b32-22bc76366c4a

New Issues

Severity	Issue	Source File / Package	Checkmarx Insight
	Unpinned Actions Full Length Commit SHA	/crowdin-pull.yml: 40	Pinning an action to a full length commit SHA is currently the only way to use an action as an immutable release. Pinning to a particular SHA helps...

Fixed Issues

Severity	Issue	Source File / Package
	Unpinned Actions Full Length Commit SHA	/crowdin-pull.yml: 47

[willmartian]

Whoops, let me fix those broken tests.

edit: fixed in b8ee6a0

[codecov]

Codecov Report

Attention: Patch coverage is 42.10526% with 22 lines in your changes missing coverage. Please review.

Project coverage is 33.47%. Comparing base (a07b072) to head (6f1f799).
Report is 66 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...r/src/platform/popup/layout/popup-width.service.ts	36.84%	12 Missing ⚠️
apps/browser/src/popup/app.component.ts	0.00%	3 Missing ⚠️
.../src/platform/popup/layout/popup-layout.stories.ts	0.00%	2 Missing ⚠️
apps/browser/src/popup/main.ts	0.00%	2 Missing ⚠️
...rc/vault/popup/settings/appearance-v2.component.ts	77.77%	2 Missing ⚠️
libs/components/src/select/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12040      +/-   ##
==========================================
- Coverage   33.48%   33.47%   -0.01%     
==========================================
  Files        2851     2876      +25     
  Lines       89283    89871     +588     
  Branches    17008    17104      +96     
==========================================
+ Hits        29900    30088     +188     
- Misses      57029    57407     +378     
- Partials     2354     2376      +22     

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

[vleague2]

Do we want to have some stories of the popup layout at different widths?

[danielleflinn]

Feedback from DS team call:

• Lets update the field label to "Extension width"
• Lets update the behavior so when the extension is popped out the popout's width defaults to the same as the "Extension width" setting.

[willmartian]

Lets update the field label to "Extension width"

e56bb8a

Lets update the behavior so when the extension is popped out the popout's width defaults to the same as the "Extension width" setting.

ffd8820

[willmartian]

Do we want to have some stories of the popup layout at different widths?

5573a86

[willmartian]

@justindbaur When is it appropriate to share state definitions? Width is semantically related to theming, and it feels like we aren't meant to create a new state definition for every little piece of state, right? (Otherwise, why have key definitions at all?)

[justindbaur]

If you have similar things you can share them but one of the important rules is you shouldn't share them between teams and most likely shouldn't share them to "far" away from each other. Because the problem you could run into is someone else makes a key with the same name within a state definition that someone else does. So I think since this would be in DS ownership it should use its own state definition.

[willmartian]

Boom: 0fc38b9 (thanks)

[justindbaur]

Just one optional comment but otherwise looks good.