移动端视图下如何让Angular Material标签在对话框内边缘对齐？

我尝试将Angular Material tabs放入Angular Material dialog中，遇到了一个问题：网页视图里对话框内的标签能边缘对齐，但移动端视图里做不到。通常mat-tabs在对话框外使用时，移动端和网页端都能正常边缘对齐，但在对话框内就不行。

当前移动端效果 #

可以看到标签及其内容没有边缘对齐，右侧存在空白区域。

预期移动端效果 #

代码示例可查看提供的StackBlitz项目（需在普通浏览器窗口打开，无痕模式可能无法访问）

这个问题根源是Angular Material Dialog在移动端默认自带内边距，导致mat-tabs容器无法填满对话框宽度。直接通过以下样式调整即可解决：

1. 清除对话框默认内边距
   在组件样式文件中添加：

::ng-deep .mat-dialog-container {
  padding: 0 !important;
}

如果项目禁用了::ng-deep，可以把这段代码放到全局样式文件里，或者给组件设置encapsulation: ViewEncapsulation.None。

2. 让Tabs占满对话框宽度
   给mat-tabs组件设置宽度：

mat-tabs {
  width: 100%;
}

3. 优化内容内边距（可选）
   如果移除对话框内边距后，标签内容过于贴边，可给内容区域添加内边距：

.mat-tab-body-content {
  padding: 16px;
}

调整后，移动端视图里的Tabs就能和对话框边缘完全对齐，达到预期效果。

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