fix(paperless): align stat scaling

packages/widgets/src/paperless-ngx/component.module.css

@@ -4,8 +4,8 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
-  padding: clamp(6px, 3cqi, 14px);
-  gap: clamp(4px, 2cqi, 10px);
+  padding: clamp(6px, 3cqi, 12px);
+  gap: clamp(4px, 2cqi, 8px);
   overflow: hidden;
 }
 
@@ -80,8 +80,9 @@
 .grid {
   display: grid;
   flex: 1;
+  width: 100%;
   min-height: 0;
-  gap: clamp(4px, 2cqi, 10px);
+  gap: clamp(4px, 2cqi, 8px);
   grid-template-columns: repeat(var(--stat-cols, 2), minmax(0, 1fr));
   grid-auto-rows: 1fr;
   align-content: stretch;
@@ -94,8 +95,8 @@
   justify-content: center;
   min-height: 0;
   min-width: 0;
-  gap: clamp(2px, 1.5cqi, 5px);
-  padding: clamp(4px, 2.5cqi, 10px);
+  gap: clamp(2px, 1.5cqi, 4px);
+  padding: clamp(4px, 2cqi, 8px);
   border-radius: var(--mantine-radius-md);
   background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
   overflow: hidden;
@@ -104,13 +105,14 @@
 .statIcon {
   color: var(--mantine-color-dimmed);
   flex-shrink: 0;
+  line-height: 0;
 }
 
 .statLabel {
   font-size: clamp(
     calc(8px * var(--board-canvas-ui-scale, 1)),
     calc(2.5cqi * var(--board-canvas-ui-scale, 1)),
-    calc(12px * var(--board-canvas-ui-scale, 1))
+    calc(11px * var(--board-canvas-ui-scale, 1))
   );
   color: var(--mantine-color-dimmed);
   line-height: 1.2;
@@ -123,14 +125,18 @@
 
 .statValue {
   font-size: clamp(
-    calc(14px * var(--board-canvas-ui-scale, 1)),
-    calc(5.5cqi * var(--board-canvas-ui-scale, 1)),
-    calc(24px * var(--board-canvas-ui-scale, 1))
+    calc(13px * var(--board-canvas-ui-scale, 1)),
+    calc(5cqi * var(--board-canvas-ui-scale, 1)),
+    calc(20px * var(--board-canvas-ui-scale, 1))
   );
   font-weight: 700;
   color: var(--mantine-primary-color-filled);
   line-height: 1.1;
   text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .emptyState {

packages/widgets/src/paperless-ngx/component.tsx

@@ -32,7 +32,7 @@ const statIcons = {
 const gridHiddenWhenHeroShown = new Set(["documentsTotal", "documentsInbox"]);
 
 const gridColsByWidth = [
-  { minWidth: 380, cols: 3 },
+  { minWidth: 300, cols: 3 },
   { minWidth: 220, cols: 2 },
   { minWidth: 0, cols: 1 },
 ] as const;