diff --git a/ui/src/styles.css b/ui/src/styles.css index 2762519..5a34180 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -11,14 +11,15 @@ body { .app-shell { min-height: 100vh; - padding: 12px; + height: 100vh; + padding: clamp(12px, 1.4vw, 28px); display: flex; flex-direction: column; } .workspace { width: 100%; - max-width: 1280px; + max-width: 2200px; margin: 0 auto; flex: 1; display: flex; @@ -28,11 +29,11 @@ body { .content-grid { display: grid; - grid-template-columns: minmax(0, 1fr) 240px; - grid-auto-rows: 440px; + grid-template-columns: minmax(0, 1fr) clamp(240px, 18vw, 360px); + grid-auto-rows: clamp(380px, 42vh, 620px); align-items: stretch; - gap: 10px; - margin-bottom: 10px; + gap: clamp(10px, 0.8vw, 18px); + margin-bottom: clamp(10px, 0.8vw, 18px); flex: 0 0 auto; } @@ -43,6 +44,22 @@ body { flex-direction: column; } +.results-row { + flex: 1; + min-height: 0; +} + +.results-row > .panel { + display: flex; + flex-direction: column; +} + +.results-row > .panel > .ant-card-body { + flex: 1; + min-height: 0; + overflow: auto; +} + .results-placeholder { flex: 1; display: flex; @@ -144,7 +161,7 @@ body { .results-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: 10px; + gap: clamp(10px, 0.8vw, 18px); align-items: stretch; } @@ -206,6 +223,57 @@ body { padding: 0 7px; } +/* Large screens / maximized window: scale content up so it stays comfortable. */ +@media (min-width: 1680px) { + .panel .ant-card-head-title { + font-size: 16px; + } + + .ant-table-small .ant-table-thead > tr > th, + .ant-table-small .ant-table-tbody > tr > td { + padding: 6px 12px; + font-size: 15px; + } + + .ant-input-number { + height: 30px; + } + + .ant-input-number .ant-input-number-input { + height: 28px; + font-size: 15px; + } + + .result-tile { + min-height: 72px; + padding: 10px 14px; + } + + .result-tile span { + font-size: 14px; + } + + .result-tile strong { + font-size: 22px; + } + + .limit-label { + font-size: 14px; + } +} + +@media (min-width: 2200px) { + .ant-table-small .ant-table-thead > tr > th, + .ant-table-small .ant-table-tbody > tr > td { + font-size: 17px; + padding: 8px 14px; + } + + .result-tile strong { + font-size: 26px; + } +} + @media (max-width: 900px) { .app-shell { padding: 10px;