tick backdrop painted incorrectly when align==='inner'

[bdorninger]

Expected behavior

The backfrop shall be rendered under the text of the tick label

The scale's tick options:

.....
x2: {
        type: 'linear',
        position: 'top',
        ticks: {
          callback: function (val: number, index: number, ticks: Tick[]) {        
            return index === 0 || index === ticks.length - 1 ? 'FOO' : '0';
          },
          color: 'green',
          backdropColor: 'yellow',
          showLabelBackdrop: true,
          align: 'inner',
        },
      },
....

Current behavior

When tick config "align" === 'inner' for a scale, the rightmost tick has its backdrop rendered outside, the text itself is correctly rendered inside

Reproducible sample

https://rxjs-jmjkfr.stackblitz.io/

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

4.4.0

Browser name and version

Chrome 119

Link to your project

No response