The fix that worked for me:

@media only screen and (max-width: 992px) {
  :host >>> .picker .picker__frame {
    min-width: 20rem;
    max-width: 25.39rem;
    width: 23.4375rem;
  }

  :host >>> .clockpicker-plate {
    width: 21.09375rem;
    height: 21.09375rem;
  }

  :host >>> .clockpicker-plate .clockpicker-canvas, .clockpicker-plate .clockpicker-dial {
    width: 21.09375rem;
    height: 21.09375rem;
  }

  :host >>> .clockpicker-plate .clockpicker-dial .clockpicker-tick {
    line-height: 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
  }
}

(all numbers provided for 80% font reduce, for other value they should be recalculated)

We will take a closer look at this problem. I'm afraid there is no easy workaround for that, you can try to inspect the component in developer tools and overwrite some styles.

Timepicker is a pro component and according to our system, you use free version. Please, provide us a number of your order or registered email to confirm your access to MDB Pro components and premium support.

You can send it to me on email: a.idzikowski@mdbootstrap.com