[PM-29116] UI Text cut off on default size extension for Download Bitwarden (#18789)

* updates settings buttons to wrap instead of truncate

* adds new download copy

apps/browser/src/_locales/en/messages.json

@@ -6127,6 +6127,10 @@
   "emailPlaceholder": {
     "message": "user@bitwarden.com , user@acme.com"
   },
+
+  "downloadBitwardenApps": {
+    "message": "Download Bitwarden apps"
+  },
   "emailProtected": {
     "message": "Email protected"
   },

apps/browser/src/tools/popup/settings/settings-v2.component.html

@@ -1,19 +1,21 @@
 <popup-page>
-  <bit-spotlight *ngIf="!(hasPremium$ | async)" persistent>
-    <span class="tw-text-xs"
-      >{{ "unlockFeaturesWithPremium" | i18n }}
-      <button
-        bitLink
-        buttonType="primary"
-        class="tw-text-xs"
-        type="button"
-        (click)="openUpgradeDialog()"
-        [title]="'upgradeNow' | i18n"
-      >
-        {{ "upgradeNow" | i18n }}
-      </button>
-    </span>
-  </bit-spotlight>
+  @if (!(hasPremium$ | async)) {
+    <bit-spotlight persistent>
+      <span class="tw-text-xs"
+        >{{ "unlockFeaturesWithPremium" | i18n }}
+        <button
+          bitLink
+          buttonType="primary"
+          class="tw-text-xs"
+          type="button"
+          (click)="openUpgradeDialog()"
+          [title]="'upgradeNow' | i18n"
+        >
+          {{ "upgradeNow" | i18n }}
+        </button>
+      </span>
+    </bit-spotlight>
+  }
   <popup-header slot="header" pageTitle="{{ 'settings' | i18n }}">
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
@@ -23,14 +25,14 @@
 
   <bit-item-group>
     <bit-item>
-      <a bit-item-content routerLink="/account-security">
+      <a bit-item-content routerLink="/account-security" [truncate]="false">
         <i slot="start" class="bwi bwi-lock" aria-hidden="true"></i>
         {{ "accountSecurity" | i18n }}
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>
     <bit-item>
-      <a bit-item-content routerLink="/autofill">
+      <a bit-item-content routerLink="/autofill" [truncate]="false">
         <i slot="start" class="bwi bwi-check-circle" aria-hidden="true"></i>
         <div class="tw-flex tw-items-center tw-justify-center">
           <p class="tw-pr-2">{{ "autofill" | i18n }}</p>
@@ -44,7 +46,7 @@
       </a>
     </bit-item>
     <bit-item>
-      <a bit-item-content routerLink="/notifications">
+      <a bit-item-content routerLink="/notifications" [truncate]="false">
         <i slot="start" class="bwi bwi-file-text" aria-hidden="true"></i>
         {{ "notifications" | i18n }}
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
@@ -55,6 +57,7 @@
         bit-item-content
         routerLink="/vault-settings"
         (click)="dismissBadge(NudgeType.EmptyVaultNudge)"
+        [truncate]="false"
       >
         <i slot="start" class="bwi bwi-vault" aria-hidden="true"></i>
         <div class="tw-flex tw-items-center tw-justify-center">
@@ -63,20 +66,18 @@
             Currently can be only 1 item for notification.
             Will make this dynamic when more nudges are added
           -->
-          <span
-            *ngIf="showVaultBadge$ | async"
-            bitBadge
-            variant="notification"
-            [attr.aria-label]="'nudgeBadgeAria' | i18n"
-            >1</span
-          >
+          @if (showVaultBadge$ | async) {
+            <span bitBadge variant="notification" [attr.aria-label]="'nudgeBadgeAria' | i18n"
+              >1</span
+            >
+          }
         </div>
 
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>
     <bit-item>
-      <a bit-item-content routerLink="/appearance">
+      <a bit-item-content routerLink="/appearance" [truncate]="false">
         <i slot="start" class="bwi bwi-brush" aria-hidden="true"></i>
         {{ "appearance" | i18n }}
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
@@ -85,7 +86,7 @@
 
     @if (showAdminSettingsLink$ | async) {
       <bit-item>
-        <a bit-item-content routerLink="/admin">
+        <a bit-item-content routerLink="/admin" [truncate]="false">
           <i slot="start" class="bwi bwi-business" aria-hidden="true"></i>
           <div class="tw-flex tw-items-center tw-justify-center">
             <p class="tw-pr-2">{{ "admin" | i18n }}</p>
@@ -101,30 +102,28 @@
     }
 
     <bit-item>
-      <a bit-item-content routerLink="/about">
+      <a bit-item-content routerLink="/about" [truncate]="false">
         <i slot="start" class="bwi bwi-info-circle" aria-hidden="true"></i>
         {{ "about" | i18n }}
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>
     <bit-item>
-      <a bit-item-content routerLink="/download-bitwarden">
+      <a bit-item-content routerLink="/download-bitwarden" [truncate]="false">
         <i slot="start" class="bwi bwi-mobile" aria-hidden="true"></i>
         <div class="tw-flex tw-items-center">
-          <p class="tw-pr-2">{{ "downloadBitwardenOnAllDevices" | i18n }}</p>
-          <span
-            *ngIf="showDownloadBitwardenNudge$ | async"
-            bitBadge
-            variant="notification"
-            [attr.aria-label]="'nudgeBadgeAria' | i18n"
-            >1
-          </span>
+          <p class="tw-pr-2">{{ "downloadBitwardenApps" | i18n }}</p>
+          @if (showDownloadBitwardenNudge$ | async) {
+            <span bitBadge variant="notification" [attr.aria-label]="'nudgeBadgeAria' | i18n"
+              >1
+            </span>
+          }
         </div>
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
       </a>
     </bit-item>
     <bit-item>
-      <a bit-item-content routerLink="/more-from-bitwarden">
+      <a bit-item-content routerLink="/more-from-bitwarden" [truncate]="false">
         <i slot="start" class="bwi bwi-filter" aria-hidden="true"></i>
         {{ "moreFromBitwarden" | i18n }}
         <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>