fix(widgets): increase short stat density

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;

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 {

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);
+}

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 {

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 = [