Table cell width not recalculating on vertical scroll until redraw

## Bug Report

### Description:
When scrolling vertically, the table works correctly until a cell with a wider-than-normal width appears. At that point, the horizontal scrollbar fails to appear, preventing access to overflowing content.

### Steps to Reproduce:
* **Scroll down** until the long TD appears
* Try to **scroll to the right**. The horizontal scrollbar is not available.
* Click on "**Click to redraw**" button (that calls the regular-table **draw** function)
* Now I can see the horizontal scrollbar and go to the last column

### Example:


### Expected Result:
The horizontal scrollbar should appear when a cell wider than the viewport is rendered, allowing users to scroll horizontally to view all content.

### Actual Result:
Upon the appearance of a wider cell during vertical scrolling, the horizontal scrollbar is not displayed, until regular-table **draw** function is called.

### Current approach:
I want to subscribe to the "scroll" event on the regular-table so that I can manually call the draw function. To prevent excessive function calls during rapid scrolling, I want to use a debounce mechanism.
Is this the correct approach, or should I not subscribe to the event at all?

### Environment:
The issue occurs in both Firefox and Google Chrome.

Code:
```

function getRegularTable() {
return document.getElementsByTagName("regular-table")[0];
}

async function handleClick() {
const table = getRegularTable();
await table.draw();
}
const NUM_ROWS = 200;
const DATA_COLUMN_NAMES = ['position', 'normal-td-1', 'normal-td-2', 'long-td-in-row-100', 'normal-td-3', 'normal-td-4', 'normal-td-5', 'last-normal-td-6'];

function createPositionColumn() {
const column = [];
for (let i = 0; i < NUM_ROWS; i++) {
column.push(i + 1)
}

return column;
}

function createRegularColumn(text) {
const column = [];
for (let i = 0; i < NUM_ROWS; i++) {
column.push(text)
}

return column;
}

function createColumnWithOneLongString(text) {
const column = [];
for (let i = 0; i < NUM_ROWS; i++) {
if (i === 99) {
column.push('Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string');
continue;
}
column.push(text)
}

return column;
}

const DATA = [
createPositionColumn(),
createRegularColumn('Text'),
createColumnWithOneLongString('Some regular text to fill the TD'),
createRegularColumn('Regular text'),
createRegularColumn('Some regular text to fill the TD'),
createRegularColumn('Some regular text'),
createRegularColumn('Some text'),
createRegularColumn('short'),
]

function dataListener(x0, y0, x1, y1) {
if (x0 === 0 && y0 === 0 && x1 === 0 && y1 === 0) {
return {
num_rows: DATA[0].length,
num_columns: DATA_COLUMN_NAMES.length,
column_headers: DATA_COLUMN_NAMES.slice(x0, x1).map(x => [x])
};
}
return {
num_rows: DATA[0].length,
num_columns: DATA.length,
column_headers: DATA_COLUMN_NAMES.slice(x0, x1).map(x => [x]),
data: DATA.slice(x0, x1).map(col => col.slice(y0, y1))
};
}

window.addEventListener("load", () => {
const table = getRegularTable();
table.setDataListener(dataListener);
table.draw();
});

```

Start with the provided HTML reproduction and inspect regular-table's scroll handling and draw path. Scroll to the long cell, verify that the horizontal scrollbar is missing, then compare the result after calling draw. Done means the scrollbar appears when the wider cell is rendered during vertical scrolling without requiring a manual redraw.

Written by the indexing model from the issue text.