Horizontally scroll Angular Material Stepper form header items

Question

I have an Angular Material Stepper form and I have 15 steps on it. As there are a lot of steps, the header text is shrinking down and the text cannot be seen. Please refer to the image below:

I am trying to set a fixed width to each header item and as well as make the header horizontally scrollable like it does in Material Tabs. The code I have used is below:

StackBlitz

Please help me get this done.

Answer 1

Important Add CSS in style.css https://stackblitz.com/edit/angular-swzbpn

.mat-horizontal-stepper-header-container {
  width: fit-content !important;
}