fix: allow multi select options to overflow (#702)

Author: arjunlalb

projects/components/src/multi-select/multi-select.component.scss

@@ -64,12 +64,17 @@
   @include dropdown(6px);
   min-width: 120px;
   display: flex;
+  height: 100%;
   flex-direction: column;
 
   .divider {
     padding: 0px 16px 4px 16px;
   }
 
+  .multi-select-options {
+    overflow: auto;
+  }
+
   .multi-select-option {
     display: flex;
     height: 34px;

projects/components/src/multi-select/multi-select.component.ts

@@ -88,20 +88,22 @@ import { MultiSelectJustify } from './multi-select-justify';
               </ng-container>
             </ng-container>
 
-            <div
-              *ngFor="let item of this.filteredOptions$ | async"
-              (click)="this.onSelectionChange(item)"
-              class="multi-select-option"
-            >
-              <input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
-              <ht-icon
-                class="icon"
-                *ngIf="item.icon"
-                [icon]="item.icon"
-                size="${IconSize.ExtraSmall}"
-                [color]="item.iconColor"
-              ></ht-icon>
-              <span class="label">{{ item.label }}</span>
+            <div class="multi-select-options">
+              <div
+                *ngFor="let item of this.filteredOptions$ | async"
+                (click)="this.onSelectionChange(item)"
+                class="multi-select-option"
+              >
+                <input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
+                <ht-icon
+                  class="icon"
+                  *ngIf="item.icon"
+                  [icon]="item.icon"
+                  size="${IconSize.ExtraSmall}"
+                  [color]="item.iconColor"
+                ></ht-icon>
+                <span class="label">{{ item.label }}</span>
+              </div>
             </div>
           </div>
         </ht-popover-content>