BUG/View Modes configs makes the ruler on the top disappear

[hekod777]

We want to add some extra days padding on both ends for the ruler (the part shows dates months year information) on the top

this is the example config

  tasks = [
    {
      id: 't1',
      name: 'TASK 1',
      start: '2021-12-31T13:21:54.530Z',
      end: '2021-12-31T13:51:54.530Z',
      progress: 47,
      dependencies: '',
    },
    {
      id: 't2',
      name: 'TASK 2',
      start: '2021-12-31T14:21:54.530Z',
      end: '2021-12-31T14:51:54.530Z',
      progress: 19.5,
      dependencies: 't1',
    },
  ];

    this.gantt = new Gantt('#gantt', this.tasks, {
      on_click: function (task) {
      },
      on_date_change: function (task, start, end) {
      },
      on_progress_change: function (task, progress) {
      },
      on_view_change: function (mode) {
      },
      view_mode: 'Day',
      language: 'en',
      view_modes: [
        {
          name: 'Day',
          padding: '30d',
          step: '24h',
        },
      ],
    });

the extra days padding were added. but the ruler on the top disappeared

stackbliz: https://stackblitz.com/edit/angular-8ci7fqeh?file=src%2Fapp%2Fapp.component.ts,package.json,angular.json,tsconfig.json

is there anything wrong in this config? or it requires a fix?