fix(multi-org): typeahead dropdown hugs the item's list (#5376)

Author: ChitlangeSahas

src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderTypeAheadMenu.tsx

@@ -19,6 +19,8 @@ type State = {
 }
 
 export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
+  private listItemHeight = 50
+  private maxDropdownHeight = 150
   constructor(props: Props) {
     super(props)
     this.state = {
@@ -82,6 +84,9 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
     }
   }
 
+  private calculateDropdownHeight = (numberOfItems: number) =>
+    Math.min(numberOfItems * this.listItemHeight, this.maxDropdownHeight)
+
   render() {
     const {typeAheadPlaceHolder = 'Type here to search', style} = this.props
     const {searchTerm, queryResults, selectedItem} = this.state
@@ -103,9 +108,11 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
         {filterSearchInput}
         {queryResults && queryResults.length > 0 ? (
           <List
-            height={style?.height ?? 150}
+            height={
+              style?.height ?? this.calculateDropdownHeight(queryResults.length)
+            }
             itemCount={queryResults.length}
-            itemSize={50}
+            itemSize={this.listItemHeight}
             width="100%"
             layout="vertical"
             itemData={queryResults}