@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.9858a50 → 2.33.0-pr.feature-robot-precondition-list.372.03b3aa0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.33.0-pr.feature-robot-precondition-list.372.9858a50",
+  "version": "2.33.0-pr.feature-robot-precondition-list.372.03b3aa0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/DataGrid.tsx

@@ -17,7 +17,7 @@ import {
   useGridApiRef,
 } from "@mui/x-data-grid"
 import { observer } from "mobx-react-lite"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
 export interface WandelbotsDataGridProps<T = Record<string, unknown>> {
@@ -110,6 +110,7 @@ export const WandelbotsDataGrid = externalizeComponent(
     }: WandelbotsDataGridProps<T>) => {
       const theme = useTheme()
       const apiRef = useGridApiRef()
+      const containerRef = useRef<HTMLDivElement>(null)
 
       // Internal state for selection when not controlled
       const [internalSelectedItem, setInternalSelectedItem] =
@@ -130,6 +131,31 @@ export const WandelbotsDataGrid = externalizeComponent(
         }
       }, [rows, columns, apiRef])
 
+      // Auto-resize columns when the DataGrid container is resized
+      useEffect(() => {
+        if (!containerRef.current || !apiRef.current) return
+
+        const resizeObserver = new ResizeObserver(() => {
+          // Use a small timeout to ensure the DataGrid has processed the size change
+          setTimeout(() => {
+            if (apiRef.current && rows.length > 0) {
+              apiRef.current.autosizeColumns({
+                includeOutliers: true,
+                includeHeaders: true,
+                expand: true,
+                columns: columns.map((col) => col.field),
+              })
+            }
+          }, 100)
+        })
+
+        resizeObserver.observe(containerRef.current)
+
+        return () => {
+          resizeObserver.disconnect()
+        }
+      }, [apiRef, rows.length, columns])
+
       // Handle default selection - only use if no selectedItem is explicitly provided
       const effectiveSelectedItem = useMemo(() => {
         // If selectedItem is explicitly provided, use it (including null)
@@ -401,6 +427,7 @@ export const WandelbotsDataGrid = externalizeComponent(
 
       return (
         <Box
+          ref={containerRef}
           sx={{
             height: "100%",
             display: "flex",

package/src/components/RobotCard.tsx

@@ -227,7 +227,7 @@ export const RobotCard = externalizeComponent(
       // Determine if runtime view should be hidden when height is too low
       // Runtime should be hidden BEFORE the robot (at higher threshold)
       const shouldHideRuntime = isLandscape
-        ? cardSize.height < 350 // Landscape: hide runtime at height < 350px
+        ? cardSize.height < 310 // Landscape: hide runtime at height < 350px
         : cardSize.height < 450 // Portrait: hide runtime at height < 450px
 
       return (