요약복 모드 전환시 카드박스 높이 조절

This commit is contained in:
Macbook
2026-05-26 17:15:09 +09:00
parent 3fc0281ec4
commit a4830e9bd8
2 changed files with 39 additions and 9 deletions
@@ -131,7 +131,7 @@ const VirtualTargetGrid: React.FC<Props> = ({
ticker={tickers?.get(focusTarget.market)}
/>
) : (
<div className="vtd-grid">
<div className={`vtd-grid vtd-grid--${viewMode}`}>
{targets.map(t => {
const strat = strategies.find(s => s.id === (t.strategyId ?? session.globalStrategyId));
return (
@@ -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 {