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.