making chart smaller

bento-platform · Oct 16, 2024 · 70e49ae · 70e49ae
1 parent df3459e
commit 70e49ae
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/js/components/Overview/ChartCard.tsx b/src/js/components/Overview/ChartCard.tsx
@@ -7,8 +7,8 @@ import CustomEmpty from '../Util/CustomEmpty';
 import { CHART_HEIGHT, BOX_SHADOW } from '@/constants/overviewConstants';
 import { useElementWidth, useTranslationCustom, useTranslationDefault } from '@/hooks';
 import type { ChartDataField } from '@/types/data';
+import { useResponsive } from '@/components/ResponsiveContext';
 
-const CARD_STYLE: React.CSSProperties = { height: '415px', borderRadius: '11px', ...BOX_SHADOW };
 const ROW_EMPTY_STYLE: React.CSSProperties = { height: `${CHART_HEIGHT}px` };
 
 interface TitleComponentProps {
@@ -30,6 +30,8 @@ const ChartCard: React.FC<ChartCardProps> = memo(({ section, chart, onRemoveChar
   const td = useTranslationDefault();
   const containerRef = useRef<HTMLDivElement>(null);
   const width = useElementWidth(containerRef, chart.width);
+  const { isMobile } = useResponsive();
+  const CARD_STYLE: React.CSSProperties = { height: isMobile ? '350px' : '415px', borderRadius: '11px', ...BOX_SHADOW };
 
   const {
     data,