fix(dees-statsgrid): center CPU core bars when they occupy less than ~66% of the tile and switch bar fills to absolute positioning for correct alignment and smoother transitions

ts_web/elements/dees-statsgrid/dees-statsgrid.ts

@@ -426,6 +426,10 @@ export class DeesStatsGrid extends DeesElement {
         padding: 4px 0;
       }
 
+      .cpu-cores-bars.centered {
+        justify-content: center;
+      }
+
       .cpu-core-bar-container {
         flex: 1;
         min-width: 6px;
@@ -442,14 +446,16 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
         background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
         border-radius: 2px;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
+        position: relative;
         overflow: hidden;
         min-height: 40px;
       }
 
       .cpu-core-bar-fill {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
         width: 100%;
         background: ${cssManager.bdTheme('#666666', '#888888')};
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
@@ -832,6 +838,14 @@ export class DeesStatsGrid extends DeesElement {
       return 'high';
     };
 
+    // Calculate if bars should be centered (when they take up less than 66.6% of available width)
+    // Max bar width = cores * 24px + (cores - 1) * 3px gap
+    const maxBarsWidth = cores.length * 24 + (cores.length - 1) * 3;
+    // Estimate tile content width based on columnSpan and minTileWidth (subtract padding)
+    const columnSpan = tile.columnSpan || 1;
+    const estimatedTileWidth = (this.minTileWidth * columnSpan) + ((columnSpan - 1) * this.gap) - 32; // 32px for padding
+    const shouldCenter = maxBarsWidth < estimatedTileWidth * 0.666;
+
     return html`
       <div class="cpu-cores-wrapper">
         <div class="cpu-cores-header">
@@ -839,7 +853,7 @@ export class DeesStatsGrid extends DeesElement {
           <span class="cpu-cores-unit">%</span>
           <span class="cpu-cores-label">${cores.length} cores</span>
         </div>
-        <div class="cpu-cores-bars">
+        <div class="cpu-cores-bars ${shouldCenter ? 'centered' : ''}">
           ${cores.map(core => {
             const usage = Math.min(100, Math.max(0, core.usage));
             const colorClass = getColorClass(usage);