fix(widgets): support compact stat sizes

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

@@ -9,6 +9,11 @@
   overflow: hidden;
 }
 
+.rootShort {
+  padding: 4px;
+  gap: 2px;
+}
+
 .hero {
   display: flex;
   align-items: center;
@@ -88,6 +93,10 @@
   align-content: stretch;
 }
 
+.gridShort {
+  gap: 2px;
+}
+
 .statTile {
   display: flex;
   flex-direction: column;
@@ -102,6 +111,17 @@
   overflow: hidden;
 }
 
+.statTileShort {
+  gap: 2px;
+  padding: 3px;
+}
+
+.statTileNarrowShort {
+  flex-direction: row;
+  gap: 2px;
+  padding: 1px 3px;
+}
+
 .statIcon {
   color: var(--mantine-color-dimmed);
   flex-shrink: 0;
@@ -109,6 +129,7 @@
 }
 
 .statLabel {
+  flex-shrink: 0;
   font-size: clamp(
     calc(8px * var(--board-canvas-ui-scale, 1)),
     calc(2.5cqi * var(--board-canvas-ui-scale, 1)),
@@ -123,7 +144,20 @@
   white-space: nowrap;
 }
 
+.statLabelShort {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .statValue {
+  flex-shrink: 0;
   font-size: clamp(
     calc(13px * var(--board-canvas-ui-scale, 1)),
     calc(5cqi * var(--board-canvas-ui-scale, 1)),
@@ -139,6 +173,15 @@
   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));
+}
+
 .emptyState {
   display: flex;
   flex: 1;