Resolved the bug The banner message is causing the search bar to be o…

src/portal/src/app/shared/components/global-search/search-result.component.html

@@ -1,4 +1,4 @@
-<div class="search-overlay" *ngIf="state">
+<div [style.top.px]="getTopValue()" class="search-overlay" *ngIf="state">
     <div id="placeholder1"></div>
     <div class="search-header">
         <a href="javascript:void(0)" (click)="close()"

src/portal/src/app/shared/components/global-search/search-result.component.ts

@@ -11,7 +11,14 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    Renderer2,
+    ElementRef,
+    HostListener,
+} from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 
 import { GlobalSearchService } from './global-search.service';
@@ -21,6 +28,7 @@ import { SearchTriggerService } from './search-trigger.service';
 import { AppConfigService } from '../../../services/app-config.service';
 import { MessageHandlerService } from '../../services/message-handler.service';
 import { filter, switchMap } from 'rxjs/operators';
+import { BannerMessage } from 'src/app/base/left-side-nav/config/config';
 
 @Component({
     selector: 'search-result',
@@ -79,6 +87,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                     this.onGoing = false;
                     this.originalCopy = searchResults; // Keep the original data
                     this.searchResults = this.clone(searchResults);
+                    this.adjustOverlayTop();
                 },
                 error => {
                     this.onGoing = false;
@@ -133,6 +142,7 @@ export class SearchResultComponent implements OnInit, OnDestroy {
     // Show the results
     show(): void {
         this.stateIndicator = true;
+        this.adjustOverlayTop();
     }
 
     // Close the result page
@@ -169,11 +179,27 @@ export class SearchResultComponent implements OnInit, OnDestroy {
                 this.onGoing = false;
                 this.originalCopy = searchResults; // Keep the original data
                 this.searchResults = this.clone(searchResults);
+                this.adjustOverlayTop();
             },
             error => {
                 this.onGoing = false;
                 this.msgHandler.handleError(error);
             }
         );
     }
+    getTopValue(): number {
+        const headerHeight: number =
+            document.querySelector('navigator')?.clientHeight || 0;
+        const bannerHeight: number =
+            document.querySelector('app-app-level-alerts')?.clientHeight || 0;
+        return headerHeight + bannerHeight;
+    }
+
+    private adjustOverlayTop(): void {
+        const topValue = this.getTopValue();
+    }
+
+    onResize(event) {
+        this.adjustOverlayTop();
+    }
 }

src/portal/src/app/shared/components/global-search/search.component.scss

@@ -8,7 +8,6 @@
     z-index: 999;
     box-sizing: border-box;
     background: #fafafa;
-    top: 60px;
     left: 0;
     padding-left: 36px;
     padding-right: 36px;