Datatable headers scroll up despite "Freeze Header" property being enabled

[Tshepiso-R]

Issue Summary:

Header scrolls up unexpectedly after enabling the "freeze header" property in the datatable. See the video attached

Steps to Reproduce:

1. Go to this URL on the functional admin portal.
2. Enable Edit Mode:
3. Open the Form Designer:
4. find and click on the "datatable" component in the Form Designer.
5. In the datatable's properties, locate and enable the "Freeze Header" setting.
6. Ensure the table displays 100 records per page.
7. Save Changes and Render:
8. Scroll to Test:
   • Attempt to scroll down using:
     • The vertical scroller, or
     • The two-finger scrolling method (on touchpads or touch devices).
9. Observe Behavior:
   • Notice the table headers freeze as expected initially, but they eventually scroll up along with the table contents instead of remaining frozen.

Expected Behavior:

The headers should remain frozen at the top of the table while scrolling down, regardless of the number of records.

Actual Behavior:

• The headers scroll up with the rest of the table contents, despite the "freeze header" property being enabled.

Video:

• https://www.awesomescreenshot.com/video/32861330?key=7f4bc46a076059e899daa5730a3be400