From 1118f8d4390f3b05591dd4b15013da4f5d525b27 Mon Sep 17 00:00:00 2001
From: Shuowei Li <shuowei@google.com>
Date: Mon, 11 Aug 2025 19:54:47 +0000
Subject: [PATCH] feat: Adjust anywidget CSS to prevent overflow

The anywidget display was taking up the full width of the container, even when the container was smaller than the widget. This change adjusts the CSS to use `display: inline-block` to ensure that the widget scales to the width of the container.
---
 bigframes/display/table_widget.css | 4 ++++
 bigframes/display/table_widget.js  | 9 +++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/bigframes/display/table_widget.css b/bigframes/display/table_widget.css
index 037fcac0f2..0c6c5fa5ef 100644
--- a/bigframes/display/table_widget.css
+++ b/bigframes/display/table_widget.css
@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+.bigframes-widget {
+	display: inline-block;
+}
+
 .bigframes-widget .table-container {
 	max-height: 620px;
 	overflow: auto;
diff --git a/bigframes/display/table_widget.js b/bigframes/display/table_widget.js
index 7fff72d1ba..dea8bbb943 100644
--- a/bigframes/display/table_widget.js
+++ b/bigframes/display/table_widget.js
@@ -36,8 +36,7 @@ const Event = {
  */
 function render({ model, el }) {
 	// Main container with a unique class for CSS scoping
-	const container = document.createElement("div");
-	container.classList.add("bigframes-widget");
+	el.classList.add("bigframes-widget");
 
 	// Structure
 	const tableContainer = document.createElement("div");
@@ -149,10 +148,8 @@ function render({ model, el }) {
 	footer.appendChild(paginationContainer);
 	footer.appendChild(pageSizeContainer);
 
-	container.appendChild(tableContainer);
-	container.appendChild(footer);
-
-	el.appendChild(container);
+	el.appendChild(tableContainer);
+	el.appendChild(footer);
 
 	// Initial render
 	handleTableHTMLChange();