I successfully resolved this issue by adding the following custom CSS:
To differentiate this time picker from others and prevent interference, I created a new custom class called 'one-minute-gap' and applied CSS specifically to it.
Here is the code snippet from the component.html file:
<mat-form-field>
<mat-label>StartTime</mat-label>
<input matInput readonly [ngxTimepicker]="timeStart" [formControlName]="'startTime'" [format]="24" />
<ngx-material-timepicker-toggle [for]="timeStart">
<mat-icon svgIcon="mat_solid:access_time" ngxMaterialTimepickerToggleIcon></mat-icon>
</ngx-material-timepicker-toggle>
<ngx-material-timepicker #timeStart [minutesGap]="1" disabled="false" [timepickerClass]="'one-minute-gap'"></ngx-material-timepicker>
</mat-form-field>
And here is the corresponding CSS styles in the component.scss file:
::ng-deep .one-minute-gap {
width: auto !important;
ngx-material-timepicker-dial{
.timepicker-dial{
.timepicker-dial__container{
justify-content: center !important;
}
}
}
ngx-material-timepicker-minutes-face {
ngx-material-timepicker-face {
.clock-face {
width: 370px !important;
height: 370px !important;
padding: 5px !important;
.clock-face__container {
.clock-face__number--outer {
height: calc(400px / 2 - 20px) !important;
span {
font-size: 12px !important;
}
}
}
}
}
}
}
After applying these changes, the time picker now looks like this:
https://i.sstatic.net/rdT8V.png