How to align the width of the Dropdown Panel to its Textbox in Angular

Issue

I am following this Answer for the Dropdown panel to display just below or above the Dropdown Textbox

Dropdown

Now I am having the same Dropdown panel like this..

<mat-select disableOptionCentering (selectionChange)="validateInputs(userForm)" formControlName="siteId" placeholder="Select Site ID"       panelClass="custom-panel-siteId">
     <input 
     (keyup)="onFilterOptions($event.target.value)" 
     matInput
     class="filter-select-options"
     autocomplete="off"
     type="text"
     placeholder="Search Site ID">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
    {{option}}
    </mat-option>
</mat-select>

But the panel is extending outside of the textbox as below...

As highlighted in yellow color, the width of the panel is increasing little bit..

Also, I am using below code in styles.scss file..But is is not aligning properly..

.custom-panel-siteId {
  margin: 45px 0px !important;
}

EDIT

The style details are as below when I do an Inspect Element in Developer Tools

Any help would be greatly appreciated.

SECOND EDIT

Now with the latest code changes, the panel is coming as per the width of the Dropdown Textbox. But it is moving little left side as below...

Solution

You can override the width using the same CSS block. Please apply the below change! As per your analysis, we need to override min-width: calc(100% + 32px) so we can add the min-width and force (!important) set it to 100%.

.custom-panel.override-1.override-2.override-3 {
  margin: 25px 0px;
  min-width: 100% !important;
}

html

<mat-select 
panelClass="custom-panel override-1 override-2 override-3">
...

stackblitz

Answered By - Naren Murali