[Bug]: .manualColumnResizer goes out of position inside scaled parent element

[daxas-boop]

Describe the bug

Issue Encountered

In a React project using @handsotable/react and handsontable, I have run into an issue with the positioning of the .manualColumnResizer element. This happens when the HotTable element is nested within a parent element that has a CSS transform scale applied to it.

Observed Behavior

If a transform scale is applied to a parent element, the left style of the .manualColumnResizer element changes causing it to go out completely of position. It either shifts too far to the left if the scale is less than 1, or too far to the right if the scale is greater than 1.

Expected Behavior

Ideally, the left position of the .manualColumnResizer should remain constant, regardless of any scaling transformations applied to parent elements.

I am not 100% sure if this behavior is intentional, a bug, or if I'm doing something else wrong. If it is intentional, is there a way to override this position change of the .manualColumnResizer element in some way?

Video/Screenshots

Provide a link to the demo with the bug reproduction

Code box link

Handsontable version

14.1.0

Framework version

No response

Your environment

Chrome Version 121.0.6167.85 (Official Build) (64-bit), Linux Mint 21.3 Cinnamon

[adrianszymanski89]

Hi @daxas-boop

Thank you for contacting us. As for now, Handsontable does not support any responsive behavior. Applying scaling to the parent container will cause misalignment issues, for example, the one you experienced.

We have plans to modify the structure of the table elements, but we have yet to set a specific timeline for this project. For the time being, we don't recommend transforming the parent HTML element of the table in any way to avoid that kind of issues.