diff --git a/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx b/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx
index 6967bbe5f..a3f1b9bcd 100644
--- a/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx
+++ b/apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx
@@ -153,7 +153,7 @@ const MetricViewChartCardContainer = React.forwardRef<
>(({ children, loadingData, hasData, errorData, isTable, className }, ref) => {
const cardClass = React.useMemo(() => {
if (loadingData || errorData || !hasData) return 'h-full max-h-[600px]';
- if (isTable) return '';
+ if (isTable) return 'h-full';
return 'h-full max-h-[600px]';
}, [isTable, loadingData, hasData, errorData]);
@@ -162,7 +162,7 @@ const MetricViewChartCardContainer = React.forwardRef<
x?.chart_config?.selectedChartType, []) }
+ );
+ const isTable = selectedChartType === 'table';
+
const content = metricId ? (
-
+
= ({ children }) => {
+const MetricResizeContainer: React.FC> = ({
+ children,
+ isTable,
+}) => {
const width = (useResizableValue('width') as number) || 700;
const ref = useRef(null);
const element = useElement();
const editor = useEditorRef();
const editorWidth = useSize(ref)?.width ?? 700;
const isSelected = useSelected();
- // const { isDragging, handleRef } = useDraggable({
- // element: element,
- // });
const align = 'center'; // Default align for metrics
const selectNode = () => {
@@ -86,11 +94,11 @@ const MetricResizeContainer: React.FC = ({ children }) => {
};
const height = useMemo(() => {
+ if (isTable) return undefined;
const ratio = 9 / 16;
if (typeof width !== 'number') return (editorWidth ?? 400) * ratio;
-
return width * ratio;
- }, [width, editorWidth]);
+ }, [width, editorWidth, isTable]);
return (
= ({ children }) => {