fix(ui5-table-growing): add rootMargin to observer (#11242)

There is an issue with subpixel rendering introducing rounding errors. The growing sample in the playground is not working with zoom lower than 100%.

If the table is inside a scroll container, which is inside of an IFrame taken a fraction of the available width, rounding errors lead to the IntersectionObserver not calling the callback, as it does not detect the end-row scrolling into viewport.

Added a rootMargin of 5px to try to circumvent the rounding issue by increasing the intersection area. Additionally, the root should be the scrollContainer instead of the document.

Author: DonkeyCo

packages/main/src/TableGrowing.ts

@@ -14,6 +14,7 @@ import {
 	TABLE_MORE,
 	TABLE_MORE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
+import { findVerticalScrollContainer } from "./TableUtils.js";
 
 // The documentation should be similar to the Table.ts class documentation!
 // Please only use that style where it uses markdown and the documentation is more readable.
@@ -225,7 +226,10 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 	 */
 	_getIntersectionObserver(): IntersectionObserver {
 		if (!this._observer) {
-			this._observer = new IntersectionObserver(this._onIntersection.bind(this), { root: document });
+			this._observer = new IntersectionObserver(this._onIntersection.bind(this), {
+				root: findVerticalScrollContainer(this._table ?? document.body),
+				rootMargin: "5px",
+			});
 		}
 		return this._observer;
 	}