diff --git a/bun.lock b/bun.lock
index 0eca45f4..ededf92c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.48",
+      "version": "0.8.49",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
diff --git a/packages/ui/components/StatsBar.wrn b/packages/ui/components/StatsBar.wrn
index 83299565..ffb6f809 100644
--- a/packages/ui/components/StatsBar.wrn
+++ b/packages/ui/components/StatsBar.wrn
@@ -152,9 +152,21 @@ component StatsBar {
     }
 
     .wrn-stats-bar__inner {
-      width: min(calc(100% - 2rem), 80rem);
+      width: min(100%, 80rem);
       margin-inline: auto;
     }
+
+    .wrn-stats-bar[data-gutter="sm"] .wrn-stats-bar__inner {
+      width: min(calc(100% - 2rem), 80rem);
+    }
+
+    .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner {
+      width: min(calc(100% - 4rem), 80rem);
+    }
+
+    .wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner {
+      width: min(calc(100% - 6rem), 80rem);
+    }
     .wrn-stats-bar[data-outer-spacing="md"] { margin-block: 2rem; }
     .wrn-stats-bar[data-radius="xl"] .wrn-stats-bar__surface { overflow: hidden; border-radius: 1.25rem; }
     .wrn-stats-bar[data-shadow="sm"] .wrn-stats-bar__surface { box-shadow: 0 10px 30px rgb(15 23 42 / 0.05); }
@@ -491,7 +503,9 @@ component StatsBar {
 
     @media (max-width: 639px) {
       .wrn-stats-bar[data-mobile-columns="1"] .wrn-stats-bar__surface { grid-template-columns: 1fr; }
+      .wrn-stats-bar[data-gutter="sm"] .wrn-stats-bar__inner,
       .wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner { width: calc(100% - 2rem); }
+      .wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner { width: calc(100% - 3rem); }
       .wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__surface {
         border-inline: 0;
         border-radius: 0;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 232893fa..53c5789d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.48",
+  "version": "0.8.49",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 68541b2a..ca5f4898 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -3194,6 +3194,16 @@ test("breadcrumb default separators remain visible without generated icon CSS",
   expect(html).not.toContain("icon-[lucide--chevron-right]");
 });
 
+test("stats bar desktop gutters align its surface with container content", () => {
+  const source = readFileSync(uiComponentPath("StatsBar"), "utf8");
+  expect(source).toMatch(
+    /data-gutter="md"[^}]+width: min\(calc\(100% - 4rem\), 80rem\)/s,
+  );
+  expect(source).toMatch(
+    /data-gutter="lg"[^}]+width: min\(calc\(100% - 6rem\), 80rem\)/s,
+  );
+});
+
 test("mega menu bridges the gap between its trigger and panel", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
   /*