[CL-876] Responsive preferences page

[mark-youssef-bitwarden]

🎟️ Tracking

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

📔 Objective

Update the layout of the preferences page to be more responsive. Currently the preference fields always display at 50% width causing them to get smaller than should be.

Now the space reduces first, then the fields as the viewport gets smaller.

📸 Screenshots

Screen.Recording.2025-10-10.at.10.03.15.AM.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

[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

[github-actions]

Checkmarx One – Scan Summary & Details – 63b1a014-6b29-4cac-8256-02dca604cc61

Great job! No new security vulnerabilities introduced in this pull request

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 38.87%. Comparing base (bc48164) to head (319c3a6).
⚠️ Report is 13 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #16828   +/-   ##
=======================================
  Coverage   38.87%   38.87%           
=======================================
  Files        3420     3420           
  Lines       97313    97313           
  Branches    14625    14625           
=======================================
  Hits        37830    37830           
  Misses      57827    57827           
  Partials     1656     1656           

☔ 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.

[danielleflinn]

Screen recording looks good from a Design perspective. Thanks Mark!