Fix skill trend chart overflow in the detail modal.

Clip chart containers, add axis padding, and wrap the skills table to keep graphs inside the frame.

Co-authored-by: Cursor <cursoragent@cursor.com>

static/app.js

@@ -622,7 +622,8 @@ function renderSkills(d) {
         <p class="skill-advisor-hint" id="skill-advisor-hint"></p>
         <div id="skill-advisor-body"></div>
       </div>
-      <div class="card">
+      <div class="card inv-card">
+        <div class="inv-table-wrap">
         <table class="skills-table" id="skills-table">
           <thead><tr id="skills-thead-row">
             <th data-sort="name"></th>
@@ -633,6 +634,7 @@ function renderSkills(d) {
           </tr></thead>
           <tbody id="skill-tbody"></tbody>
         </table>
+        </div>
       </div>`;
 
     document.getElementById("skill-search").addEventListener("input", (e) => {
@@ -1142,6 +1144,7 @@ function openTrendChartModal(title, snapshots, values, datasetLabel, color = "#4
     },
     options: chartOptsTime(snapshots),
   });
+  requestAnimationFrame(() => state.charts.trendModal?.resize());
 }
 
 function openInventoryChartModal(itemKey, itemName) {
@@ -2264,6 +2267,9 @@ function chartOptsTime(snapshots) {
   return {
     responsive: true,
     maintainAspectRatio: false,
+    layout: {
+      padding: { top: 8, right: 16, bottom: 4, left: 4 },
+    },
     plugins: {
       legend: { labels: { color: "#8b92a8" } },
       tooltip: {
@@ -2282,11 +2288,18 @@ function chartOptsTime(snapshots) {
         ticks: {
           color: "#8b92a8",
           maxTicksLimit: 8,
+          maxRotation: 0,
+          autoSkip: true,
+          padding: 8,
           callback: (v) => formatChartAxisTs(v, spanMs),
         },
         grid: { color: "#2d3348" },
       },
-      y: { ticks: { color: "#8b92a8" }, grid: { color: "#2d3348" } },
+      y: {
+        ticks: { color: "#8b92a8", padding: 8 },
+        grid: { color: "#2d3348" },
+        grace: "5%",
+      },
     },
   };
 }

static/style.css

@@ -448,8 +448,10 @@ tr:hover td { background: var(--bg-hover); }
   overflow: hidden;
 }
 
-.inv-table-wrap {
+.inv-table-wrap,
+.table-wrap {
   overflow-x: auto;
+  max-width: 100%;
 }
 
 .inv-table {
@@ -611,8 +613,11 @@ body.inv-chart-modal-open {
   position: relative;
   z-index: 1;
   width: min(720px, 100%);
+  max-width: 100%;
   margin: 0;
   padding: 20px 20px 16px;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .inv-chart-modal-panel h3 {
@@ -641,8 +646,18 @@ body.inv-chart-modal-open {
 }
 
 .chart-wrap-modal {
-  height: 280px;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  height: min(280px, 50vh);
   margin-top: 0;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chart-wrap-modal canvas {
+  display: block;
+  max-width: 100%;
 }
 
 .inv-group-row td {
@@ -790,8 +805,17 @@ body.inv-chart-modal-open {
 
 .chart-wrap {
   position: relative;
+  width: 100%;
+  max-width: 100%;
   height: 220px;
   margin-top: 12px;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chart-wrap canvas {
+  display: block;
+  max-width: 100%;
 }
 
 .item-equipped { color: var(--accent); }