From 55e5e008c7817b14741087a80d0e3d80e44006f8 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Tue, 6 Sep 2022 19:32:01 +0100
Subject: [PATCH] Don't prevent whitespace wrapping in links/buttons, widen
 desktop pages (#3407)

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 https://github.com/bitwarden/clients/issues/2620
---
 apps/browser/src/popup/scss/base.scss    | 2 --
 apps/browser/src/popup/scss/buttons.scss | 1 -
 apps/desktop/src/scss/base.scss          | 1 -
 apps/desktop/src/scss/buttons.scss       | 2 --
 apps/desktop/src/scss/pages.scss         | 4 ++--
 apps/web/src/scss/buttons.scss           | 1 -
 6 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss
index 8465a1ba338..0ec248e6bf7 100644
--- a/apps/browser/src/popup/scss/base.scss
+++ b/apps/browser/src/popup/scss/base.scss
@@ -99,7 +99,6 @@ button {
 }
 
 button {
-  white-space: nowrap;
   cursor: pointer;
 }
 
@@ -323,7 +322,6 @@ header {
         padding: 7px 0;
         text-decoration: none;
         font-size: 12px;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 100%;
diff --git a/apps/browser/src/popup/scss/buttons.scss b/apps/browser/src/popup/scss/buttons.scss
index f4eea2a1cc6..c1b30ae5980 100644
--- a/apps/browser/src/popup/scss/buttons.scss
+++ b/apps/browser/src/popup/scss/buttons.scss
@@ -5,7 +5,6 @@
   padding: 7px 15px;
   border: 1px solid #000000;
   font-size: $font-size-base;
-  white-space: nowrap;
   text-align: center;
   cursor: pointer;
 
diff --git a/apps/desktop/src/scss/base.scss b/apps/desktop/src/scss/base.scss
index 0c891784fff..981d462f2d8 100644
--- a/apps/desktop/src/scss/base.scss
+++ b/apps/desktop/src/scss/base.scss
@@ -85,7 +85,6 @@ button {
   border: none;
   background: transparent;
   color: inherit;
-  white-space: nowrap;
   cursor: pointer;
 }
 
diff --git a/apps/desktop/src/scss/buttons.scss b/apps/desktop/src/scss/buttons.scss
index 4b6fe81f639..52de33c8d2c 100644
--- a/apps/desktop/src/scss/buttons.scss
+++ b/apps/desktop/src/scss/buttons.scss
@@ -7,7 +7,6 @@
   padding: 7px 15px;
   border: 1px solid #000000;
   font-size: $font-size-base;
-  white-space: nowrap;
   text-align: center;
   cursor: pointer;
 
@@ -176,7 +175,6 @@ button.no-btn {
   @include themify($themes) {
     color: themed("textColor");
   }
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
diff --git a/apps/desktop/src/scss/pages.scss b/apps/desktop/src/scss/pages.scss
index 6c839826ea9..87862bbef3a 100644
--- a/apps/desktop/src/scss/pages.scss
+++ b/apps/desktop/src/scss/pages.scss
@@ -54,7 +54,7 @@
 #lock-page,
 #update-temp-password-page {
   .content {
-    width: 300px;
+    width: 325px;
     transition: width 0.25s linear;
 
     p {
@@ -112,7 +112,7 @@
 
 #sso-page {
   .content {
-    width: 300px;
+    width: 325px;
 
     .box {
       margin-top: 30px;
diff --git a/apps/web/src/scss/buttons.scss b/apps/web/src/scss/buttons.scss
index 9c854806cb7..6ff4f2e673e 100644
--- a/apps/web/src/scss/buttons.scss
+++ b/apps/web/src/scss/buttons.scss
@@ -191,7 +191,6 @@ button.no-btn {
   border: none;
   padding: 0;
   color: inherit;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;