feat: Stabilize interactive table height to prevent notebook layout shifts (#2378)

This update introduces a new feature in the interactive table display
that prevents notebook layout shifts when changing the number of rows
per page. The table height is now intelligently set and fixed after its
initial display, creating a more stable and predictable user experience.

Verified at:
vs code notebook:
https://screencast.googleplex.com/cast/NTY2NjM1NDQwNDI2MTg4OHwzNDEwZTA5Zi0wOA

Fixes #<460861785> 🦕

Author: shuoweil

bigframes/display/table_widget.js

@@ -170,9 +170,27 @@ function render({ model, el }) {
     model.save_changes();
   }
 
+  let isHeightInitialized = false;
+
   function handleTableHTMLChange() {
     tableContainer.innerHTML = model.get(ModelProperty.TABLE_HTML);
 
+    // After the first render, dynamically set the container height to fit the
+    // initial page (usually 10 rows) and then lock it.
+    setTimeout(() => {
+      if (!isHeightInitialized) {
+        const table = tableContainer.querySelector('table');
+        if (table) {
+          const tableHeight = table.offsetHeight;
+          // Add a small buffer(e.g. 2px) for borders to avoid scrollbars.
+          if (tableHeight > 0) {
+            tableContainer.style.height = `${tableHeight + 2}px`;
+            isHeightInitialized = true;
+          }
+        }
+      }
+    }, 0);
+
     const sortableColumns = model.get(ModelProperty.ORDERABLE_COLUMNS);
     const currentSortContext = model.get(ModelProperty.SORT_CONTEXT) || [];