diff --git a/frontend/src/components/virtual/VirtualTargetGrid.tsx b/frontend/src/components/virtual/VirtualTargetGrid.tsx index 30ae9cf..f38defe 100644 --- a/frontend/src/components/virtual/VirtualTargetGrid.tsx +++ b/frontend/src/components/virtual/VirtualTargetGrid.tsx @@ -131,7 +131,7 @@ const VirtualTargetGrid: React.FC = ({ ticker={tickers?.get(focusTarget.market)} /> ) : ( -
+
{targets.map(t => { const strat = strategies.find(s => s.id === (t.strategyId ?? session.globalStrategyId)); return ( diff --git a/frontend/src/styles/virtualTradingDashboard.css b/frontend/src/styles/virtualTradingDashboard.css index 84ec100..8274b30 100644 --- a/frontend/src/styles/virtualTradingDashboard.css +++ b/frontend/src/styles/virtualTradingDashboard.css @@ -900,7 +900,7 @@ width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); - grid-auto-rows: minmax(520px, auto); + grid-auto-rows: auto; gap: 14px; padding: 4px 4px 12px; overflow-y: auto; @@ -908,6 +908,12 @@ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; align-content: start; + align-items: start; +} + +/* 상세보기 — 행 높이 통일·카드 stretch */ +.vtd-grid--detail { + grid-auto-rows: minmax(520px, auto); align-items: stretch; } @@ -940,18 +946,32 @@ display: flex; flex-direction: column; gap: 10px; - height: 100%; -} - -.vtd-card:not(.vtd-card--chart-mode):not(.vtd-card--detail) { - min-height: 360px; + height: auto; + align-self: start; } .vtd-card > .vtd-sig-panel-wrap { - flex: 1; + flex: 0 0 auto; min-height: 0; } +/* 요약보기 — 신호 패널만큼 카드 높이 축소 (실시간 지표 비교 테이블 미표시) */ +.vtd-card--summary:not(.vtd-card--chart-mode) > .vtd-sig-panel-wrap--summary { + flex: 0 0 auto; +} + +.vtd-card--summary:not(.vtd-card--chart-mode) .vtd-sig-panel--summary { + flex: 0 0 auto; +} + +.vtd-card--summary:not(.vtd-card--chart-mode) .vtd-card-foot { + margin-top: 0; +} + +.vtd-card--detail .vtd-card-foot { + margin-top: auto; +} + /* 상세 카드 — 그리드 행 높이에 맞춰 동일 높이, 푸터는 카드 하단 고정 */ .vtd-card.vtd-card--detail { height: 100%; @@ -960,6 +980,11 @@ min-height: 520px; } +.vtd-card.vtd-card--detail > .vtd-sig-panel-wrap { + flex: 1; + min-height: 0; +} + .vtd-card.vtd-card--detail > .vtd-sig-panel-wrap--detail { flex: 1; min-height: 0; @@ -1410,12 +1435,17 @@ display: flex; flex-direction: column; gap: 10px; + flex: 0 0 auto; + min-height: 0; +} + +.vtd-card--detail .vtd-sig-panel { flex: 1; min-height: 0; } .vtd-sig-panel--summary { - overflow-y: auto; + overflow: visible; } .vtd-sig-panel--detail-top {