위젯 미니차트 수정

frontend/src/components/floatingWidgets/FloatingWidgetLayer.tsx

@@ -24,6 +24,7 @@ import {
 import type { WidgetSlot } from '../../types/widgetDashboard';
 import FloatingWidgetLayoutPicker from './FloatingWidgetLayoutPicker';
 import FloatingWidgetWindow from './FloatingWidgetWindow';
+import '../../styles/paperDashboard.css';
 import '../../styles/widgetDashboard.css';
 import '../../styles/floatingWidget.css';
 

frontend/src/components/paper/PaperMiniChart.tsx

@@ -69,7 +69,10 @@ const PaperMiniChart: React.FC<Props> = ({
   useEffect(() => {
     if (!containerRef.current) return undefined;
     const t = readChartTheme(containerRef.current);
-    const chart = createChart(containerRef.current, {
+    const el = containerRef.current;
+    const chart = createChart(el, {
+      width: el.clientWidth || undefined,
+      height: el.clientHeight || undefined,
       layout: {
         background: { type: ColorType.Solid, color: t.bgColor },
         textColor: t.textColor,
@@ -103,7 +106,18 @@ const PaperMiniChart: React.FC<Props> = ({
     });
     ro.observe(containerRef.current);
 
+    const onLayoutSync = () => {
+      if (containerRef.current && chartRef.current) {
+        chartRef.current.applyOptions({
+          width: containerRef.current.clientWidth,
+          height: containerRef.current.clientHeight,
+        });
+      }
+    };
+    window.addEventListener('gc-widget-layout-sync', onLayoutSync);
+
     return () => {
+      window.removeEventListener('gc-widget-layout-sync', onLayoutSync);
       ro.disconnect();
       chart.remove();
       chartRef.current = null;

frontend/src/styles/floatingWidget.css

@@ -303,10 +303,49 @@
   flex: 0 0 auto;
 }
 
+.fw-window-cell .wd-widget-host--panel,
+.fw-window-cell .wd-widget-host--mini-chart {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
 .fw-window-cell .wd-widget-host--panel > .wd-panel-body,
 .fw-window-cell .wd-widget-host--panel > .wd-mini-chart-wrap {
   flex: 1;
   min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.fw-window-cell .wd-mini-chart-wrap {
+  padding: 0;
+}
+
+.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 8px 0;
+  overflow: hidden;
+}
+
+.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-head,
+.fw-window-cell .wd-widget-host--mini-chart .ptd-tf-row {
+  flex-shrink: 0;
+}
+
+.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-canvas {
+  flex: 1;
+  min-height: 80px !important;
+  max-height: none !important;
+  width: 100%;
+  position: relative;
 }
 
 .fw-window-cell .wd-widget-host--chart,
@@ -371,19 +410,6 @@
   overflow: auto;
 }
 
-.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-wrap {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.fw-window-cell .wd-widget-host--mini-chart .ptd-chart-canvas {
-  flex: 1;
-  min-height: 0 !important;
-  max-height: none !important;
-}
-
 .fw-window-cell .ptd-analysis-chart {
   flex: 1;
   min-height: 0;