From ae9ec7e75a2aa0a8911adbae34a1295921be24fd Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 9 May 2026 01:08:20 +0200
Subject: [PATCH] fix(frontend): inbound expand chevron position + cpu history
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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        | 39 ++++++++++++++------
 frontend/src/pages/inbounds/InboundList.vue  | 11 ++++++
 frontend/src/pages/index/CpuHistoryModal.vue |  8 ++--
 3 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Sparkline.vue b/frontend/src/components/Sparkline.vue
index 07d84127..050064e2 100644
--- a/frontend/src/components/Sparkline.vue
+++ b/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>
diff --git a/frontend/src/pages/inbounds/InboundList.vue b/frontend/src/pages/inbounds/InboundList.vue
index ae0d6497..366dd9a0 100644
--- a/frontend/src/pages/inbounds/InboundList.vue
+++ b/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. */
diff --git a/frontend/src/pages/index/CpuHistoryModal.vue b/frontend/src/pages/index/CpuHistoryModal.vue
index fdc68367..2bf34be4 100644
--- a/frontend/src/pages/index/CpuHistoryModal.vue
+++ b/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;
 }