v0.34.12

src/admin/web/css/30-overview.css

@@ -76,6 +76,75 @@ html[data-theme=cream] :is(.card, .stat, dialog) {
   stroke-dasharray: var(--chart-grid-dash, 2 5);
 }
 
+/* Optional X/Y scale readouts do not change SVG coordinates or chart ranges.
+ * Labels are HTML, not distorted SVG text under preserveAspectRatio="none". */
+.rp-chart-axis-host {
+  position: relative;
+  display: flow-root;
+  width: 100%;
+  min-width: 0;
+}
+
+.rp-chart-axis-host>svg { display: block; vertical-align: top; }
+
+.rp-chart-axis-y {
+  position: absolute;
+  inset: 0 0 15px;
+  pointer-events: none;
+  font: 9px/1.15 var(--mono);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.rp-chart-axis-y span {
+  position: absolute;
+  left: 3px;
+  max-width: calc(100% - 6px);
+  padding: 1px 3px;
+  border-radius: 2px;
+  white-space: nowrap;
+  background: color-mix(in srgb, var(--panel) 82%, transparent);
+}
+
+.rp-chart-axis-top { top: var(--rp-axis-top, 8%); transform: translateY(-30%); }
+.rp-chart-axis-middle { top: 50%; transform: translateY(-50%); }
+.rp-chart-axis-bottom { top: var(--rp-axis-bottom, 92%); transform: translateY(-70%); }
+
+.rp-chart-axis-x {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 5px;
+  min-height: 15px;
+  padding: 2px 3px 0;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font: 9px/1.2 var(--mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.rp-chart-axis-x .rp-chart-axis-start { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.rp-chart-axis-x .rp-chart-axis-end { min-width: 0; text-align: right; }
+.rp-chart-axis-compact .rp-chart-axis-y,
+.rp-chart-axis-multiple .rp-chart-axis-y,
+.rp-chart-axis-series[hidden] { display: none; visibility: hidden; }
+.rp-chart-axis-compact .rp-chart-axis-x { font-size: 8px; gap: 2px; }
+.rp-chart-axis-series {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 10px;
+  padding: 2px 3px;
+  font: 8px/1.2 var(--mono);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 560px) {
+  .rp-chart-axis-y .rp-chart-axis-middle { display: none; }
+  .rp-chart-axis-x { font-size: 8px; }
+}
+
 .chart-footer {
   display: flex;
   justify-content: space-between;