fix(frontend): inbound expand chevron position + cpu history layout

- Push the inbound table's expand chevron away from the left edge with
  margin-inline + cell padding so it isn't flush against the corner
- Move "Timeframe: …" caption above the chart (was below); restore
  the line that the previous edit removed
- Fix x-axis time labels being clipped at the bottom of the cpu chart
  — the offset (paddingTop+drawHeight+22 = 222) exceeded the SVG
  viewBox height (220); dropped to +14 so labels sit at y=214 with
  room for descenders
- Move the SVG axis text colors out of <style scoped> into a global
  block — Vue's scoped CSS doesn't always hash-attribute SVG <text>
  descendants, so the dark-mode overrides via :global() weren't
  matching; bumped opacity 0.55 → 0.85 for legibility on navy/black

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/Sparkline.vue

@@ -184,7 +184,7 @@ const gradId = `spkGrad-${Math.random().toString(36).slice(2, 9)}`;
         :key="'x' + i"
         class="cpu-grid-x-text"
         :x="t.x"
-        :y="paddingTop + drawHeight + 22"
+        :y="paddingTop + drawHeight + 14"
         text-anchor="middle"
         font-size="10"
       >{{ t.label }}</text>
@@ -233,20 +233,37 @@ const gradId = `spkGrad-${Math.random().toString(36).slice(2, 9)}`;
   display: block;
   width: 100%;
 }
+</style>
 
-.cpu-grid-y-text,
-.cpu-grid-x-text {
-  fill: rgba(0, 0, 0, 0.45);
-}
-.cpu-grid-text {
-  fill: rgba(0, 0, 0, 0.8);
+<!-- Axis labels live on SVG <text> elements; Vue's scoped CSS doesn't
+     reliably hash-attribute SVG descendants, so the dark-mode overrides
+     have to live in a non-scoped block to actually take effect. The
+     numbers are also small, so the dark-theme fills run at ~85% opacity
+     for legibility (the previous 55% was washed out on navy backgrounds). -->
+<style>
+.sparkline-svg .cpu-grid-y-text,
+.sparkline-svg .cpu-grid-x-text {
+  fill: rgba(0, 0, 0, 0.65);
 }
 
-:global(body.dark) .sparkline-svg .cpu-grid-y-text,
-:global(body.dark) .sparkline-svg .cpu-grid-x-text {
-  fill: rgba(255, 255, 255, 0.55);
+.sparkline-svg .cpu-grid-text {
+  fill: rgba(0, 0, 0, 0.88);
 }
-:global(body.dark) .sparkline-svg .cpu-grid-text {
+
+body.dark .sparkline-svg .cpu-grid-y-text,
+body.dark .sparkline-svg .cpu-grid-x-text {
   fill: rgba(255, 255, 255, 0.85);
 }
+
+body.dark .sparkline-svg .cpu-grid-text {
+  fill: rgba(255, 255, 255, 0.95);
+}
+
+body.dark .sparkline-svg .cpu-grid-line {
+  stroke: rgba(255, 255, 255, 0.12);
+}
+
+body.dark .sparkline-svg .cpu-grid-h-line {
+  stroke: rgba(255, 255, 255, 0.35);
+}
 </style>

frontend/src/pages/inbounds/InboundList.vue

@@ -574,6 +574,17 @@ function showQrCodeMenu(dbInbound) {
   visibility: hidden;
 }
 
+/* Push the expand chevron away from the table's left edge so it has
+ * a little breathing room instead of being flush against the corner. */
+:deep(.ant-table-tbody .ant-table-cell-with-append) {
+  padding-left: 12px;
+}
+
+:deep(.ant-table-row-expand-icon) {
+  margin-inline-end: 10px;
+  margin-inline-start: 4px;
+}
+
 /* Round the table's outer corners — AD-Vue gives .ant-table the radius
  * token, but the inner header strip and footer touch the edges, so clip
  * them here. */

frontend/src/pages/index/CpuHistoryModal.vue

@@ -63,12 +63,12 @@ watch(bucket, () => { if (props.open) fetchBucket(); });
     </template>
 
     <div class="cpu-chart-wrap">
-      <Sparkline :data="points" :labels="labels" :vb-width="840" :height="220" :stroke="status?.cpu?.color || '#008771'"
-        :stroke-width="2.2" :show-grid="true" :show-axes="true" :tick-count-x="5" :max-points="points.length || 1"
-        :fill-opacity="0.18" :marker-radius="3.2" :show-tooltip="true" />
       <div class="cpu-chart-meta">
         Timeframe: {{ bucket }} sec per point (total {{ points.length }} points)
       </div>
+      <Sparkline :data="points" :labels="labels" :vb-width="840" :height="220" :stroke="status?.cpu?.color || '#008771'"
+        :stroke-width="2.2" :show-grid="true" :show-axes="true" :tick-count-x="5" :max-points="points.length || 1"
+        :fill-opacity="0.18" :marker-radius="3.2" :show-tooltip="true" />
     </div>
   </a-modal>
 </template>
@@ -84,7 +84,7 @@ watch(bucket, () => { if (props.open) fetchBucket(); });
 }
 
 .cpu-chart-meta {
-  margin-top: 4px;
+  margin-bottom: 10px;
   font-size: 11px;
   opacity: 0.65;
 }