Make layout responsive for fullscreen / large displays

- Widen workspace cap so maximized window fills the screen instead of
  leaving large side gutters
- Scale top panel height with viewport, let results area fill remaining height
- Use fluid (clamp/vw) spacing and add large-screen breakpoints that enlarge
  table text, inputs and result tiles

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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;