From d256946fda41f9cfe27731708abd267b58176f7d Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 20 Oct 2026 23:41:29 +0200
Subject: [PATCH 1/3] Add a responsive grid layout for the statistics box in
 the footer boxes

---
 .../style/layout/pageFooter/classic.scss      |  5 +++
 wcfsetup/install/files/style/ui/boxStats.scss | 35 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 wcfsetup/install/files/style/ui/boxStats.scss

diff --git a/wcfsetup/install/files/style/layout/pageFooter/classic.scss b/wcfsetup/install/files/style/layout/pageFooter/classic.scss
index 385002107c5..d7d96e72f88 100644
--- a/wcfsetup/install/files/style/layout/pageFooter/classic.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter/classic.scss
@@ -54,6 +54,11 @@
 		max-height: 100px;
 		overflow: hidden;
 	}
+
+	/* There is no dimmed footer box token. 85% keeps 4.5:1 against the default dark footer box background. */
+	.boxStats__label {
+		color: color-mix(in srgb, currentColor 85%, transparent);
+	}
 }
 
 /* styling for boxes in <footer> position */
diff --git a/wcfsetup/install/files/style/ui/boxStats.scss b/wcfsetup/install/files/style/ui/boxStats.scss
new file mode 100644
index 00000000000..0663b78f7fe
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/boxStats.scss
@@ -0,0 +1,35 @@
+/* Statistics box: `dl.plain.boxStats > div.boxStats__item > dt.boxStats__label + dd.boxStats__value`,
+   optionally with `span.boxStats__unit` inside the value. The label comes first in the source so that
+   screen readers announce "label, value", while the value is drawn on top. */
+.boxStats {
+	display: grid;
+	gap: 20px 24px;
+	/* 140px fits values up to 99,999,999. */
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
+}
+
+.boxStats__item {
+	display: flex;
+	flex-direction: column-reverse;
+	gap: 2px;
+	/* Packs from the top, so values in a row stay aligned when a label wraps. */
+	justify-content: flex-end;
+	min-width: 0;
+}
+
+.boxStats__label {
+	color: var(--wcfContentDimmedText);
+}
+
+.boxStats__value {
+	font-size: var(--wcfFontSizeSection);
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.boxStats__unit {
+	font-size: 0.8em;
+	font-weight: 400;
+	margin-inline-start: 0.2em;
+}

From df7491cab9efbb34aa0bea76eb6e576020e9ef05 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 20 Oct 2026 23:53:54 +0200
Subject: [PATCH 2/3] Keep empty grid tracks in the statistics box to stop
 figures spreading across wide boxes

---
 wcfsetup/install/files/style/ui/boxStats.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/boxStats.scss b/wcfsetup/install/files/style/ui/boxStats.scss
index 0663b78f7fe..a0589acc04d 100644
--- a/wcfsetup/install/files/style/ui/boxStats.scss
+++ b/wcfsetup/install/files/style/ui/boxStats.scss
@@ -4,8 +4,9 @@
 .boxStats {
 	display: grid;
 	gap: 20px 24px;
-	/* 140px fits values up to 99,999,999. */
-	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
+	/* 140px fits values up to 99,999,999. `auto-fill` keeps the empty tracks, so the figures stay
+	   together instead of spreading across a full-width box. */
+	grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
 }
 
 .boxStats__item {

From aba8f4f2982cfa4d622a832e40ca45728aa2c54d Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 21 Oct 2026 14:48:55 +0200
Subject: [PATCH 3/3] Add icons to the statistics box items and stack the value
 above the label beside them

---
 wcfsetup/install/files/style/ui/boxStats.scss | 51 ++++++++++++++-----
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/boxStats.scss b/wcfsetup/install/files/style/ui/boxStats.scss
index a0589acc04d..f5f76e644bb 100644
--- a/wcfsetup/install/files/style/ui/boxStats.scss
+++ b/wcfsetup/install/files/style/ui/boxStats.scss
@@ -1,31 +1,58 @@
 /* Statistics box: `dl.plain.boxStats > div.boxStats__item > dt.boxStats__label + dd.boxStats__value`,
-   optionally with `span.boxStats__unit` inside the value. The label comes first in the source so that
-   screen readers announce "label, value", while the value is drawn on top. */
+   where the label holds `span.boxStats__icon` and `span.boxStats__labelText`, and the value optionally
+   `span.boxStats__unit`. The label comes first in the source so that screen readers announce
+   "label, value"; the grid areas place the value above the label text. */
 .boxStats {
 	display: grid;
-	gap: 20px 24px;
-	/* 140px fits values up to 99,999,999. `auto-fill` keeps the empty tracks, so the figures stay
-	   together instead of spreading across a full-width box. */
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
+	gap: 14px 16px;
+	/* 144px fits the icon plus values up to 99,999,999. `auto-fill` keeps the empty tracks, so the
+	   figures stay together instead of spreading across a full-width box. */
+	grid-template-columns: repeat(auto-fill, minmax(min(100%, 144px), 1fr));
 }
 
 .boxStats__item {
-	display: flex;
-	flex-direction: column-reverse;
-	gap: 2px;
-	/* Packs from the top, so values in a row stay aligned when a label wraps. */
-	justify-content: flex-end;
+	/* Keeps the rows from stretching to the grid row height, so values in a row stay aligned when a
+	   neighboring label wraps. */
+	align-content: start;
+	align-items: center;
+	column-gap: 10px;
+	display: grid;
+	grid-template-areas: "icon value" "icon label";
+	grid-template-columns: 32px minmax(0, 1fr);
 	min-width: 0;
 }
 
+/* Lets the icon and the label text inside the `<dt>` sit in separate grid areas of the item. The
+   color stays here and is inherited, so box positions can override it in one place. */
 .boxStats__label {
 	color: var(--wcfContentDimmedText);
+	display: contents;
+}
+
+.boxStats__icon {
+	align-items: center;
+	/* Tinted with the icon color itself, so it suits any style palette and box background. */
+	background-color: color-mix(in srgb, currentColor 10%, transparent);
+	border-radius: 8px;
+	display: flex;
+	grid-area: icon;
+	height: 32px;
+	justify-content: center;
+	width: 32px;
+}
+
+.boxStats__labelText {
+	font-size: var(--wcfFontSizeSmall);
+	grid-area: label;
+	line-height: 1.3;
+	text-wrap: pretty;
 }
 
 .boxStats__value {
-	font-size: var(--wcfFontSizeSection);
+	font-size: var(--wcfFontSizeHeadline);
 	font-variant-numeric: tabular-nums;
 	font-weight: 600;
+	grid-area: value;
 	line-height: 1.2;
 }