This is my UI code for the header section. I am facing overlapping issues due to resolution. Please help me out this issue. I am new to angular.
Please help me ASAP. Thanks in advance.
<div fxLayout="row" fxFlex="{{isShowDealerSection?55:72}}">
<div fxFlex="30" fxFlex.md="10" fxFlex.gt-xs="100%">
<button mat-button target="_blank" (click)="navigateToNew1()" [ngClass]="new1SummaryClass">
NEW1
</button>
</div>
<span style="margin: 3px">|</span>
<div fxFlex="20" fxFlex.md="25" fxFlex.gt-xs="100%">
<button mat-button target="_blank" (click)="navigateToNew2()" [ngClass]="new2SummaryClass">
NEW2
</button>
</div>
<span style="margin: 3px">|</span>
<div fxFlex="20" fxFlex.md="25">
<button mat-button target="_blank" (click)="navigateToNew3()" [ngClass]="new3SummaryClass">
NEW3
</button>
</div>
<span *ngIf="this.sharedDataService.adminScreenAccess" style="margin: 3px">|</span>
<div fxFlex="15" fxFlex.md="35" *ngIf="this.sharedDataService.adminScreenAccess">
<button mat-button [matMenuTriggerFor]="ucmenu" [ngClass]="adminClass">
NEW4
</button>
<mat-menu #ucmenu="matMenu">
<button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess"
<br /> (click)="navigateTovehicleDecertification()">Vehicle</button>
<button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess"
<br /> (click)="navigateToDealerParticipant()">Participant </button>
<button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess"
<br /> (click)="navigateToRoleDetailScreen()">Role </button>
<button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess"
<br /> (click)="navigateToVehicleHistory()">Audit </button>
<!-- <button mat-menu-item *ngIf="this.sharedDataService.adminScreenAccess"
<br /> (click)="navigateToSaleReversalReport()">Report</button> -->
</mat-menu>
</div>
<span style="margin: 3px">|</span>
<div fxFlex="100">
<button mat-button target="_blank"
<br /> (click)="navigateToSaleReversalReport()" [ngClass]="invSummaryReportClass">REPORT</button>
</div>
</div>
<div *ngIf="isShowDealerSection" fxLayout="row" class="uc-header-dealer-details" fxFlex="19">
<div fxFlex="40" fxLayout="column">
<span style="margin-bottom:-8px">SSSSSSSSSSSSS : <span style="color:gray"
<br /> [attr.title]="sharedDataService.dealerName">{{sharedDataService.ggCopy}}</span></span>
<span>SSSSSSSSSSS : <span style="color:gray">{{sharedDataService.bbbjjCode}}</span></span>
</div>