table should shrink

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<
       <div
         ref={ref}
         className={cn(
-          'bg-background flex flex-col overflow-hidden rounded border shadow h-full',
+          'bg-background flex flex-col overflow-hidden rounded border shadow',
           cardClass,
           className
         )}

apps/web/src/components/ui/report/elements/MetricElement/MetricContent.tsx

@@ -8,14 +8,12 @@ export const MetricContent = React.memo(
   ({
     metricId,
     metricVersionNumber,
-
     isExportMode = false,
     readOnly = false,
     className,
   }: {
     metricId: string;
     metricVersionNumber: number | undefined;
-
     readOnly?: boolean;
     isExportMode?: boolean;
     className?: string;

apps/web/src/components/ui/report/elements/MetricElement/MetricElement.tsx

@@ -10,7 +10,9 @@ import {
   useSelected,
   withHOC,
 } from 'platejs/react';
-import React, { type PropsWithChildren, useMemo, useRef } from 'react';
+import React, { type PropsWithChildren, useCallback, useMemo, useRef } from 'react';
+import type { BusterMetric } from '@/api/asset_interfaces/metric';
+import { useGetMetric } from '@/api/buster_rest/metrics';
 import { useSize } from '@/hooks/useSize';
 import { cn } from '@/lib/classMerge';
 import { GlobalVariablePlugin } from '../../plugins/global-variable-kit';
@@ -35,9 +37,15 @@ export const MetricElement = withHOC(
     const showFocused = isSelected && isFocused;
     const className = cn(showFocused && 'ring-ring bg-brand/5 ring-1 ring-offset-4');
 
+    const { data: selectedChartType } = useGetMetric(
+      { id: metricId },
+      { select: useCallback((x: BusterMetric) => x?.chart_config?.selectedChartType, []) }
+    );
+    const isTable = selectedChartType === 'table';
+
     const content = metricId ? (
       <MetricToolbar selectedMetricId={metricId}>
-        <MetricResizeContainer>
+        <MetricResizeContainer isTable={isTable}>
           <MetricContent
             metricId={metricId}
             metricVersionNumber={metricVersionNumber}
@@ -69,16 +77,16 @@ export const MetricElement = withHOC(
   }
 );
 
-const MetricResizeContainer: React.FC<PropsWithChildren> = ({ children }) => {
+const MetricResizeContainer: React.FC<PropsWithChildren<{ isTable: boolean }>> = ({
+  children,
+  isTable,
+}) => {
   const width = (useResizableValue('width') as number) || 700;
   const ref = useRef<HTMLDivElement>(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<PropsWithChildren> = ({ 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 (
     <figure
@@ -118,8 +126,8 @@ const MetricResizeContainer: React.FC<PropsWithChildren> = ({ children }) => {
         <div
           // ref={handleRef}
           className={cn(
-            'min-h-64',
-            !height && 'min-h-[390px]'
+            !isTable && 'min-h-64',
+            !height && !isTable && 'min-h-[390px]'
             //   isDragging && 'cursor-grabbing opacity-50'
           )}
           style={{ height }}