From e161c8c512df236b969ce8dd9a55a974f121a063 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.dev>
Date: Wed, 26 Aug 2026 20:50:02 +0200
Subject: [PATCH] fix(widgets): increase short stat density

---
 .../src/audio-stats/audio-stats-content.tsx     |  4 ++--
 .../src/audio-stats/component.module.css        |  6 +-----
 .../widgets/src/common/compact-stat-layout.ts   | 17 +++++++++++++++--
 .../src/paperless-ngx/component.module.css      |  6 +-----
 .../widgets/src/paperless-ngx/component.tsx     |  4 ++--
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/widgets/src/audio-stats/audio-stats-content.tsx b/packages/widgets/src/audio-stats/audio-stats-content.tsx
index 26294e908..9caba6dd2 100644
--- a/packages/widgets/src/audio-stats/audio-stats-content.tsx
+++ b/packages/widgets/src/audio-stats/audio-stats-content.tsx
@@ -58,8 +58,8 @@ const statLabelClassByLayout = {
 
 const statValueClassByLayout = {
   default: "",
-  short: classes.statValueShort,
-  narrowShort: `${classes.statValueShort} ${classes.statValueNarrowShort}`,
+  short: "",
+  narrowShort: classes.statValueNarrowShort,
 } as const;
 
 const COMPACT_SINGLE_COLUMN_BREAKPOINT = 220;
diff --git a/packages/widgets/src/audio-stats/component.module.css b/packages/widgets/src/audio-stats/component.module.css
index 428323bb4..95bfd1af7 100644
--- a/packages/widgets/src/audio-stats/component.module.css
+++ b/packages/widgets/src/audio-stats/component.module.css
@@ -141,13 +141,9 @@
   );
 }
 
-.statValueShort {
-  font-size: calc(12px * var(--board-canvas-ui-scale, 1));
-  line-height: 1;
-}
-
 .statValueNarrowShort {
   font-size: calc(11px * var(--board-canvas-ui-scale, 1));
+  line-height: 1;
 }
 
 .emptyState {
diff --git a/packages/widgets/src/common/compact-stat-layout.ts b/packages/widgets/src/common/compact-stat-layout.ts
index f69ea57d9..5fa4519cc 100644
--- a/packages/widgets/src/common/compact-stat-layout.ts
+++ b/packages/widgets/src/common/compact-stat-layout.ts
@@ -1,7 +1,10 @@
 const SHORT_HEIGHT_BREAKPOINT = 120;
 const NARROW_SHORT_WIDTH_BREAKPOINT = 120;
-const SHORT_ICON_SIZE = 14;
 const NARROW_SHORT_ICON_SIZE = 12;
+const SHORT_GRID_HORIZONTAL_INSET = 8;
+const SHORT_GRID_GAP = 2;
+const SHORT_ICON_WIDTH_RATIO = 0.44;
+const SHORT_ICON_SIZE_CAP = 40;
 
 export type CompactStatLayoutState = "default" | "short" | "narrowShort";
 
@@ -48,6 +51,16 @@ export function getCompactStatLayout({
   return {
     state: "short",
     columns: Math.max(visibleCount, 1),
-    iconSize: SHORT_ICON_SIZE,
+    iconSize: getShortIconSize(width, visibleCount, defaultIconSize),
   };
 }
+
+function getShortIconSize(width: number, visibleCount: number, defaultIconSize: number): number {
+  const statCount = Math.max(visibleCount, 1);
+  const totalGridGap = Math.max(statCount - 1, 0) * SHORT_GRID_GAP;
+  const availableWidth = Math.max(width - SHORT_GRID_HORIZONTAL_INSET - totalGridGap, 0);
+  const availableWidthPerStat = availableWidth / statCount;
+  const proportionalIconSize = Math.round(availableWidthPerStat * SHORT_ICON_WIDTH_RATIO);
+  const cappedIconSize = Math.min(proportionalIconSize, SHORT_ICON_SIZE_CAP);
+  return Math.max(defaultIconSize, cappedIconSize);
+}
diff --git a/packages/widgets/src/paperless-ngx/component.module.css b/packages/widgets/src/paperless-ngx/component.module.css
index 033d57420..a945ea3f5 100644
--- a/packages/widgets/src/paperless-ngx/component.module.css
+++ b/packages/widgets/src/paperless-ngx/component.module.css
@@ -173,13 +173,9 @@
   white-space: nowrap;
 }
 
-.statValueShort {
-  font-size: calc(12px * var(--board-canvas-ui-scale, 1));
-  line-height: 1;
-}
-
 .statValueNarrowShort {
   font-size: calc(11px * var(--board-canvas-ui-scale, 1));
+  line-height: 1;
 }
 
 .emptyState {
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index d15b94049..a455c11b0 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -64,8 +64,8 @@ const statLabelClassByLayout = {
 
 const statValueClassByLayout = {
   default: "",
-  short: classes.statValueShort,
-  narrowShort: `${classes.statValueShort} ${classes.statValueNarrowShort}`,
+  short: "",
+  narrowShort: classes.statValueNarrowShort,
 } as const;
 
 const ringSizeByWidth = [