codexly-ui 0.15.7 → 0.15.8

package/fesm2022/codexly-ui.mjs

@@ -15957,10 +15957,12 @@ class ClxStatCardComponent {
     _hostClass = computed(() => {
         const border = resolveColor(this.color()).borderLight;
         const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
-        // h-full so every layout fills whatever height its parent grid cell actually gives it, instead
-        // of only growing to fit its own content — otherwise two cards of the same grid size look like
-        // different heights depending on which of the 3 layouts got picked for each.
-        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full h-full overflow-hidden min-w-[200px]`;
+        // h-full + justify-center (not h-full alone) so a parent grid cell taller than this card's
+        // natural content centers it instead of stretching/cramming it — a card whose content is
+        // genuinely shorter than the cell just sits centered, never squeezed or clipped. min-h-fit
+        // guards the opposite case: a cell shorter than the content (e.g. horizontal's sparkline row)
+        // still lets the card grow to its real height instead of clipping via overflow-hidden.
+        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full h-full justify-center min-h-fit min-w-[200px]`;
         // horizontal stacks its title row above its icon/value/sparkline row (flex-col); vertical/bar
         // keep a single side-by-side row (flex items-center) as before.
         const layoutCls = this.layout() === 'horizontal' ? 'flex flex-col gap-2' : 'flex items-center gap-3';