0.36.9

langs/en_US.json

@@ -3071,9 +3071,10 @@
     "overviewLayoutNarrow": "Decrease card width",
     "overviewLayoutWiden": "Increase card width",
     "overviewLayoutHeight": "Height in rows",
+    "overviewLayoutHeightShort": "H",
     "overviewLayoutLower": "Lower",
     "overviewLayoutTaller": "Taller",
-    "overviewLayoutHeightAuto": "Automatic height: fits the content (A). Use + to make the card taller.",
+    "overviewLayoutHeightAuto": "Automatic height: fits the content (shown dimmed). Use + to make the card taller.",
     "overviewLayoutHeightFixed": "Fixed height in rows. Lower it to the content height to return to automatic sizing.",
     "overviewLayoutWidth": "Card width in 12-column grid",
     "dashboardPresetsConflict": "Preset already exists or was removed. Refresh and try again.",

langs/pl_pl.json

@@ -3071,9 +3071,10 @@
     "overviewLayoutNarrow": "Zmniejsz szerokość karty",
     "overviewLayoutWiden": "Zwiększ szerokość karty",
     "overviewLayoutHeight": "Wysokość w wierszach",
+    "overviewLayoutHeightShort": "Wys.",
     "overviewLayoutLower": "Niższy",
     "overviewLayoutTaller": "Wyższy",
-    "overviewLayoutHeightAuto": "Wysokość automatyczna: dopasowana do treści (A). Użyj +, aby powiększyć blok.",
+    "overviewLayoutHeightAuto": "Wysokość automatyczna: dopasowana do treści (wartość przygaszona). Użyj +, aby powiększyć blok.",
     "overviewLayoutHeightFixed": "Stała wysokość w wierszach. Zmniejsz do wysokości treści, aby wrócić do trybu automatycznego.",
     "overviewLayoutWidth": "Szerokość karty w siatce 12 kolumn",
     "dashboardPresetsConflict": "Preset już istnieje lub został usunięty. Odśwież listę i spróbuj ponownie.",

src/admin/web/app/dashboard-inline-layout.js

@@ -79,7 +79,7 @@ window.rustProxyInlineLayout = (() => {
                 const explicit = draft.heights?.[node.dataset.dashboardWidget] !== undefined;
                 const heightValue = node.querySelector(".overview-inline-height-value");
                 if (heightValue) {
-                    heightValue.textContent = `↕${rows.span}`;
+                    heightValue.textContent = `${t("overviewLayoutHeightShort")} ${rows.span}`;
                     heightValue.classList.toggle("is-auto", !explicit);
                     heightValue.title = explicit ? t("overviewLayoutHeightFixed") : t("overviewLayoutHeightAuto");
                 }

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

@@ -649,6 +649,127 @@ html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-m
   white-space: nowrap;
 }
 
+/* Sparkline tiles with a one-line detail (e.g. Backend retry attempts: recent rate,
+   successful retries): the detail sits on the right opposite the value, like a series
+   legend, and the chart spans the full width underneath. */
+#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend)) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto 1fr;
+  column-gap: 10px;
+  align-content: start;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>span:first-child {
+  grid-column: 1 / -1;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>strong {
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  min-width: 0;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>small {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: center;
+  max-width: 16em;
+  margin: 0;
+  line-height: 1.25;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>:is(svg:not(.ui-icon), .rp-chart-axis-host) {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  align-self: end;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>:is(svg:not(.ui-icon), .rp-chart-axis-host) {
+  align-self: stretch;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>svg:not(.ui-icon) {
+  height: auto;
+  min-height: 26px;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>.rp-chart-axis-host {
+  display: flex;
+  flex-direction: column;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>.rp-chart-axis-host>svg:not(.ui-icon) {
+  flex: 1 0 auto;
+  height: auto;
+  min-height: 26px;
+}
+
+/* Sparkline tiles with a series legend (HTTP / WebSocket protocol mix, backend
+   traffic): the legend sits on the right, opposite the main value, one series per
+   line, and the chart spans the full width below. */
+#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto 1fr;
+  column-gap: 10px;
+  align-content: start;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>span:first-child {
+  grid-column: 1 / -1;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>strong {
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  min-width: 0;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>.stat-chart-legend {
+  grid-column: 2;
+  grid-row: 2;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  align-self: center;
+  gap: 1px;
+  margin: 0;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>:is(svg:not(.ui-icon), .rp-chart-axis-host) {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  align-self: end;
+}
+
+/* Row-unit layout: the chart takes the remaining height of a taller tile. */
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>:is(svg:not(.ui-icon), .rp-chart-axis-host) {
+  align-self: stretch;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>svg:not(.ui-icon) {
+  height: auto;
+  min-height: 26px;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>.rp-chart-axis-host {
+  display: flex;
+  flex-direction: column;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>.rp-chart-axis-host>svg:not(.ui-icon) {
+  flex: 1 0 auto;
+  height: auto;
+  min-height: 26px;
+}
+
 .stat-chart .stat-chart-legend i {
   width: 8px;
   height: 8px;
@@ -1321,9 +1442,55 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline {
   font-size: 10px;
 }
 
-/* Automatic height (fits the content) is shown muted; a fixed height in full colour. */
+/* Height value: readable between its − / + buttons. Automatic height (fits the
+   content) is slightly dimmed, a fixed height is shown in full colour. */
+#panel-overview .dashboard-overview-grid.is-unlocked.has-row-units .overview-inline-width-value.overview-inline-height-value {
+  flex: 0 0 auto;
+  min-width: 34px;
+  width: auto;
+  padding: 0 4px;
+  white-space: nowrap;
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 600;
+}
+
 #panel-overview .dashboard-overview-grid.is-unlocked.has-row-units .overview-inline-height-value.is-auto {
-  color: var(--muted);
+  font-weight: 400;
+  opacity: .75;
+}
+
+/* Stat tiles taller than their content (a taller neighbour in the same row): keep
+   the label on top, centre the value in the free space, keep meters and legends at
+   the bottom and let sparklines grow, instead of leaving an empty band below. */
+#panel-overview #dashboard-overview-grid.has-row-units>.stat:not([hidden], .stat-donut, .stat-chart) {
+  grid-template-rows: auto 1fr;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat:not([hidden], .stat-donut, .stat-meter, .stat-chart, .stat-with-action, .stat-cache-outcomes)>:is(strong, small) {
+  align-self: center;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat:is(.stat-meter, .stat-chart, .stat-with-action, .stat-cache-outcomes):not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins))) {
+  display: flex;
+  flex-direction: column;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat:is(.stat-meter, .stat-chart, .stat-with-action, .stat-cache-outcomes):not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>:is(strong, .stat-value-row) {
+  margin-block: auto;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>:is(svg:not(.ui-icon), .rp-chart-axis-host) {
+  flex: 1 0 auto;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>.rp-chart-axis-host {
+  display: flex;
+  flex-direction: column;
+}
+
+#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>.rp-chart-axis-host>svg:not(.ui-icon) {
+  flex: 1 0 auto;
 }
 
 #panel-overview .dashboard-overview-grid.is-unlocked.has-row-units .overview-inline-width + .overview-inline-width {