PD-5705 Fixed the description for deep select input other type (#2849)

Co-authored-by: Angel Montenegro <a.montenegro@orcid.org>

Author: Camelia-Orcid

src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html

@@ -66,14 +66,16 @@
                       [ngClass]="subItem.secondaryItem ? 'secondaryItem' : ''"
                       class="mat-button-wrap-text"
                     >
-                      {{ subItem.label }}
+                      <span class="menu-item-content">
+                        <span class="menu-item-label">{{ subItem.label }}</span>
 
-                      <p
-                        class="orc-font-small-print"
-                        *ngIf="subItem.description"
-                      >
-                        {{ subItem.description }}
-                      </p>
+                        <p
+                          class="orc-font-small-print"
+                          *ngIf="subItem.description"
+                        >
+                          {{ subItem.description }}
+                        </p>
+                      </span>
                     </button>
                   </ng-container>
                   <ng-container *ngIf="subItem.divider">
@@ -110,11 +112,13 @@
                     [ngClass]="subItem.secondaryItem ? 'secondaryItem' : ''"
                     class="mobile mat-button-wrap-text"
                   >
-                    {{ subItem.label }}
+                    <span class="menu-item-content">
+                      <span class="menu-item-label">{{ subItem.label }}</span>
 
-                    <p class="orc-font-small-print" *ngIf="subItem.description">
-                      {{ subItem.description }}
-                    </p>
+                      <p class="orc-font-small-print" *ngIf="subItem.description">
+                        {{ subItem.description }}
+                      </p>
+                    </span>
                   </button>
                 </ng-container>
               </ng-container>

src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.scss

@@ -82,6 +82,18 @@ button.mat-button-wrap-text.secondaryItem {
   font-style: italic;
   height: 100%;
   padding: 16px 16px !important;
+  .menu-item-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    white-space: normal;
+    line-height: 1.2;
+    width: 100%;
+  }
+  .menu-item-label {
+    display: block;
+  }
   p {
     margin: 0;
     padding-top: 4px;