Scale grid offset wrong when condensed (responsive)

### Expected behavior

With the x scale grid offset set to true the vertical lines are between the ticks. Using a responsive chart resizing the canvas until not all tick labels fit will hide every other tick label (and rotate the remaining ones for some reason). Either show all vertical lines where they are supposed to be (after all, the lines still fit even if the labels don't), or hide every second vertical line, to correspond with hiding every second tick label.

### Current behavior

Every second vertical line is hidden, but the remaining ones are no longer between ticks, but now go exactly through ticks, as if I had set grid offset to false. In this condensed view switching between grid offset true/false just changes which vertical lines going through ticks are hidden and which are shown, but they all go straight through the ticks.

### Reproducible sample

https://codepen.io/leelenaleee/pen/WNyJXEe

### Optional extra steps/info to reproduce

Use the following JS:
```
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
stepped: 'middle'
}]
},
options: {
responsive: true,
scales: {
x: {
offset: true,
grid: {
offset: true
}
}
}
}
});
```

Now adjust the CSS max-width to, say, 300px.

### Possible solution

_No response_

### Context

_No response_

### chart.js version

v4.5.0

### Browser name and version

_No response_

### Link to your project

_No response_