Angular中如何使下拉面板宽度与文本框对齐？

参考了关于下拉面板上下定位的解决方案后，我使用的mat-select代码如下：

<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>

最初遇到的问题：下拉面板宽度超出文本框（黄色高亮部分宽度略大），我在styles.scss中添加了如下样式但未解决：

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

编辑补充：通过开发者工具检查到的元素样式详情见截图。

二次编辑：调整后下拉面板宽度已匹配文本框，但出现向左偏移的问题，相关截图可见，恳请提供解决方案。

解决方案建议 #

针对向左偏移的问题，可以尝试以下几种调整方式：

• 强制修正面板的水平定位，覆盖默认偏移：

.custom-panel-siteId {
  margin: 45px 0 !important;
  left: 0 !important;
  transform: translateX(0) !important;
}

• 确保面板继承父容器的水平位置，避免内置定位逻辑的影响：

.custom-panel-siteId {
  position: absolute !important;
  left: inherit !important;
  right: inherit !important;
  width: 100% !important;
}

• 排查父元素样式：检查mat-select的父元素是否设置了position: relative、padding-left或overflow等属性，这些可能会干扰面板的定位，必要时调整父元素的样式规则。

内容的提问来源于stack exchange，提问作者CPK_2011