[PS-1388] Desktop, browser, web: Don't prevent whitespace wrapping in links/buttons, widen desktop pages

[patrickhlauke]

Type of change

- [x] Bug fix
- [ ] New feature development
- [x] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Allowing whitespace to wrap solves the issue of long link/button text awkwardly breaking out of controls
Widening desktop "pages" prevents some unnecessary wrapping in places like the "Create account" button on the login screen, whose content is slightly wider than it should be (but this is currently masked by the nowrap)

Closes #2620

Code changes

• apps/browser/src/popup/scss/base.scss, apps/browser/src/popup/scss/buttons.scss, apps/desktop/src/scss/base.scss, apps/desktop/src/scss/buttons.scss, apps/web/src/scss/buttons.scss: remove white-space: nowrap from the various button/link styles, allowing overly-long content to wrap rather than break out
• apps/desktop/src/scss/pages.scss: bump the width of desktop pages from 300px to 325px (admittedly, this makes them go out of sync with small modals?)

Screenshots

Before (taken from #2620):

After:

I had a look around the desktop, web, and popup versions with this change applied, and did not come across any other changes/adverse effects - though recommend giving them a thorough once-over, just in case some situation/screen did rely on the nowrap

Before you submit

- [x] I have checked for **linting** errors (`npm run lint`) (required)
- [ ] I have added **unit tests** where it makes sense to do so (encouraged but not required)
- [ ] This change requires a **documentation update** (notify the documentation team)
- [ ] This change has particular **deployment requirements** (notify the DevOps team)

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review.
ID: PS-1388

[patrickhlauke]

/cc @danielleflinn as this affects layout/UI

[patrickhlauke]

Just noticed #2714 which tries to tackle the issue from the other end (setting white-space: normal in specific instances). Not sure which way would be best ... personally, I don't like setting something and then unsetting it in specific case, but rather avoiding the problem altogether at source (not setting white-space: nowrap).

[danielleflinn]

Thanks Patrick! We recently created a new Github team for design changes. If you can use @bitwarden/dept-design in future PRs that affect UI that would be much appreciated.

As always, thank you for your contribution!

[patrickhlauke]

@danielleflinn sure thing!

[patrickhlauke]

@danielleflinn https://github.com/orgs/bitwarden/teams/dept-design 404s for me, and when I try to manually @bitwarden/dept-design it doesn't seem to recognise it ... is it publicly accessible?

[danielleflinn]

Oh you are right; looks like only Github organization members can tag a team. Feel free to ignore the previous comment then.

[djsmith85]

This is looking good. @patrickhlauke Thank you for your contributions.