fix: 비교창 스크롤 수정 변경

src/components/atoms/organisms/CompareRunDialog.vue

@@ -9,14 +9,14 @@ import {
 } from "vue";
 import Plotly from "plotly.js-dist-min";
 
-/** ===== Types ===== */
+/* ===== Types ===== */
 type MetricKV = { key: string; value: number };
 type RunDetailType = {
   info: any;
   data: { metrics: MetricKV[]; params?: any[]; tags?: any[] };
 };
 
-/** ===== Props / Emits ===== */
+/* ===== Props / Emits ===== */
 const props = withDefaults(
   defineProps<{
     modelValue: boolean;
@@ -46,7 +46,7 @@ const emit = defineEmits<{
   (e: "update:selectedMetricKeys", v: string[]): void;
 }>();
 
-/** ===== local refs ===== */
+/* ===== local refs ===== */
 const dialogOpen = computed({
   get: () => props.modelValue,
   set: (v: boolean) => emit("update:modelValue", v),
@@ -63,7 +63,7 @@ const selectedMetricKeysProxy = computed({
 const elCompare = ref<HTMLDivElement | null>(null);
 const loading = ref(false);
 
-/** ===== helpers ===== */
+/* ===== helpers ===== */
 const fmtNumber = (v: number | null, digits = 3) => {
   if (v == null || !Number.isFinite(v)) return "";
   const abs = Math.abs(v);
@@ -75,8 +75,8 @@ const fmtNumber = (v: number | null, digits = 3) => {
 const normalizeArray = (vals: (number | null)[]) => {
   const xs = vals.filter((v): v is number => Number.isFinite(v as number));
   if (xs.length === 0) return vals;
-  const min = Math.min(...xs),
-    max = Math.max(...xs);
+  const min = Math.min(...xs);
+  const max = Math.max(...xs);
   if (max === min) return vals.map((v) => (v == null ? v : 1));
   return vals.map((v) => (v == null ? v : (v - min) / (max - min)));
 };
@@ -86,7 +86,7 @@ const valueOf = (run: RunDetailType, key: string): number | null => {
   return Number.isFinite(m as number) ? Number(m) : null;
 };
 
-/** ===== derived ===== */
+/* ===== derived ===== */
 const compareRuns = computed<RunDetailType[]>(
   () =>
     selectedRunIdsProxy.value
@@ -109,7 +109,25 @@ const activeMetricKeys = computed<string[]>(() =>
     : commonMetricKeys.value,
 );
 
-/** ===== chart ===== */
+/* ===== responsive widths for horizontal scroll =====
+   - 그래프: 막대 개수에 비례해 내부 너비를 크게 잡아 가로 스크롤 허용
+   - 테이블: (메트릭 수 + Run 컬럼 1개) * 160px 정도로 최소 너비 설정
+*/
+const chartInnerWidth = computed(() => {
+  // byMetric: X축 = metric 개수, byRun: X축 = run 개수
+  const xCount =
+    props.compareChartMode === "byMetric"
+      ? activeMetricKeys.value.length
+      : compareRuns.value.length;
+  // 막대 간격 여유를 위해 140px씩, 최소 900px 확보
+  return Math.max(900, xCount * 140 + 240);
+});
+const tableInnerWidth = computed(() => {
+  const cols = 1 + activeMetricKeys.value.length; // Run 컬럼 + metric 수
+  return Math.max(900, cols * 160);
+});
+
+/* ===== chart ===== */
 const commonLayout: Partial<any> = {
   autosize: true,
   margin: { t: 28, r: 12, b: 56, l: 56 },
@@ -181,6 +199,7 @@ function drawCompareChart() {
       ? createTracesByMetric(metricKeys, runsData)
       : createTracesByRun(metricKeys, runsData);
 
+  // byMetric 모드에서 분산 큰 순으로 정렬(가독성)
   if (props.compareChartMode === "byMetric") {
     const varianceOrder = metricKeys
       .map((k, idx) => {
@@ -216,7 +235,7 @@ function drawCompareChart() {
   );
 }
 
-/** ===== load & watch ===== */
+/* ===== load & watch ===== */
 async function loadCompareData() {
   if (!dialogOpen.value) return;
   loading.value = true;
@@ -250,9 +269,9 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
 </script>
 
 <template>
-  <v-dialog v-model="dialogOpen" max-width="1000">
+  <!-- 가로도 넉넉히, 세로는 90vh 제한 -->
+  <v-dialog v-model="dialogOpen" max-width="80vw">
     <v-card class="rounded-lg overflow-hidden">
-      <!-- 헤더: Deploy Model 스타일 적용 -->
       <v-card-title
         class="text-white font-weight-bold text-h6"
         style="background-color: #1976d2"
@@ -260,7 +279,9 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
         Compare Runs
       </v-card-title>
 
-      <!-- 상단: 선택 섹션 -->
+      <!-- 본문 전체에 세로 스크롤 -->
+      <div class="scroll-y">
+        <!-- 상단 선택 섹션 -->
         <v-card-text class="pa-6">
           <v-row dense class="mb-2">
             <v-col cols="12">
@@ -316,7 +337,9 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
                 <v-chip size="small" color="primary" variant="tonal">
                   Mode:
                   {{
-                  props.compareChartMode === "byMetric" ? "By Metric" : "By Run"
+                    props.compareChartMode === "byMetric"
+                      ? "By Metric"
+                      : "By Run"
                   }}
                 </v-chip>
                 <v-chip size="small" color="secondary" variant="tonal">
@@ -335,7 +358,7 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
           </v-row>
         </v-card-text>
 
-      <!-- 차트 & 테이블 섹션 (톤 카드로 감싸기) -->
+        <!-- 차트 (가로 스크롤) -->
         <v-card-text class="pt-0 px-6 pb-2">
           <v-card variant="tonal" class="mb-4">
             <v-card-title class="py-2 px-4">Metrics (grouped bar)</v-card-title>
@@ -344,14 +367,22 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
               <div v-if="loading" class="my-2">
                 <v-progress-linear indeterminate />
               </div>
-            <div ref="elCompare" style="width: 100%; height: 420px"></div>
+              <div class="scroll-x">
+                <div
+                  ref="elCompare"
+                  :style="{ width: chartInnerWidth + 'px', height: '420px' }"
+                />
+              </div>
             </v-card-text>
           </v-card>
 
+          <!-- 테이블 (가로 스크롤) -->
           <v-card variant="tonal">
             <v-card-title class="py-2 px-4">Comparison Table</v-card-title>
             <v-divider />
             <v-card-text class="px-0">
+              <div class="scroll-x">
+                <div :style="{ minWidth: tableInnerWidth + 'px' }">
                   <v-table density="comfortable">
                     <thead>
                       <tr>
@@ -365,23 +396,37 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
                           {{ r.info.run_name || r.info.run_id }}
                         </td>
                         <td v-for="k in activeMetricKeys" :key="k">
-                    {{ r.data.metrics.find((m) => m.key === k)?.value ?? "—" }}
+                          {{
+                            r.data.metrics.find((m) => m.key === k)?.value ??
+                            "—"
+                          }}
                         </td>
                       </tr>
                     </tbody>
                   </v-table>
+                </div>
+              </div>
             </v-card-text>
           </v-card>
         </v-card-text>
+      </div>
 
       <!-- 액션 -->
       <v-card-actions class="justify-end">
-        <v-btn variant="text" class="text-white" @click="dialogOpen = false">
-          CLOSE
-        </v-btn>
+        <v-btn variant="text" class="text-white" @click="dialogOpen = false"
+          >CLOSE</v-btn
+        >
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.scroll-y {
+  max-height: 90vh; /* 다이얼로그 본문 세로 스크롤 */
+  overflow-y: auto;
+}
+.scroll-x {
+  overflow-x: auto; /* 가로 스크롤 */
+}
+</style>