diff --git a/plugins/ui/src/js/src/elements/UITable/UITable.tsx b/plugins/ui/src/js/src/elements/UITable/UITable.tsx index d7c396939..57d25c1b1 100644 --- a/plugins/ui/src/js/src/elements/UITable/UITable.tsx +++ b/plugins/ui/src/js/src/elements/UITable/UITable.tsx @@ -83,6 +83,14 @@ export function UITable({ paddingX: marginX, paddingY: marginY, ...restStyleProps, + // Add min and max height if the user set height or width explicitly + // This fixes issues in flex boxes where one table is auto sized and the other explicit + // The explicit table will never reach its size because the auto sized table has width/height 100% + // We don't want to set flex-shrink because it could be the cross-axis value that is explicitly set + minHeight: restStyleProps.minHeight ?? restStyleProps.height, + maxHeight: restStyleProps.maxHeight ?? restStyleProps.height, + minWidth: restStyleProps.minWidth ?? restStyleProps.width, + maxWidth: restStyleProps.maxWidth ?? restStyleProps.width, }, viewStyleProps // Needed so spectrum applies styles from view instead of base which doesn't have padding ); diff --git a/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-chromium-linux.png b/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-chromium-linux.png index 9d13e930d..88a3e3aa0 100644 Binary files a/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-chromium-linux.png and b/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-chromium-linux.png differ diff --git a/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-firefox-linux.png b/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-firefox-linux.png index 4164c9f7c..b7e8aa542 100644 Binary files a/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-firefox-linux.png and b/tests/ui.spec.ts-snapshots/UI-flex-components-flex-24-1-firefox-linux.png differ