WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 38 Packages Projects Releases Wiki Activity

fix(ui): align stats surface within max width
Quality / quality (windows-latest) (push) Waiting to run
Details
Quality / quality (ubuntu-latest) (push) Failing after 9m52s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-25 16:54:23 +05:30
parent 3f6612cfe7
commit 7e1eb899b3
4 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+1 -1
View File
@@ -688,7 +688,7 @@
},
"packages/ui": {
"name": "@wrnexus/ui",
"version": "0.8.49",
"version": "0.8.50",
"dependencies": {
"@wrnexus/core": "workspace:*",
},
packages/ui/components/StatsBar.wrn
+15 -9
View File
@@ -152,20 +152,26 @@ component StatsBar {
}
.wrn-stats-bar__inner {
width: min(100%, 80rem);
--stats-max-width: 80rem;
--stats-gutter-width: 0rem;
width: min(
calc(100% - var(--stats-gutter-width)),
calc(var(--stats-max-width) - var(--stats-gutter-width))
);
margin-inline: auto;
}
.wrn-stats-bar[data-gutter="sm"] .wrn-stats-bar__inner {
width: min(calc(100% - 2rem), 80rem);
--stats-gutter-width: 2rem;
}
.wrn-stats-bar[data-gutter="md"] .wrn-stats-bar__inner {
width: min(calc(100% - 4rem), 80rem);
--stats-gutter-width: 4rem;
}
.wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner {
width: min(calc(100% - 6rem), 80rem);
--stats-gutter-width: 6rem;
}
.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; }
@@ -173,16 +179,16 @@ component StatsBar {
.wrn-stats-bar[data-variant="card"] .wrn-stats-bar__surface { border: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface); }
.wrn-stats-bar[data-max-width="compact"] .wrn-stats-bar__inner {
width: min(calc(100% - 2rem), 64rem);
--stats-max-width: 64rem;
}
.wrn-stats-bar[data-max-width="lg"] .wrn-stats-bar__inner {
width: min(calc(100% - 2rem), 72rem);
--stats-max-width: 72rem;
}
.wrn-stats-bar[data-max-width="wide"] .wrn-stats-bar__inner,
.wrn-stats-bar[data-max-width="2xl"] .wrn-stats-bar__inner {
width: min(calc(100% - 2rem), 90rem);
--stats-max-width: 90rem;
}
.wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__inner {
@@ -504,8 +510,8 @@ 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-gutter="md"] .wrn-stats-bar__inner { --stats-gutter-width: 2rem; }
.wrn-stats-bar[data-gutter="lg"] .wrn-stats-bar__inner { --stats-gutter-width: 3rem; }
.wrn-stats-bar[data-max-width="full"] .wrn-stats-bar__surface {
border-inline: 0;
border-radius: 0;
packages/ui/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@wrnexus/ui",
"version": "0.8.49",
"version": "0.8.50",
"private": true,
"type": "module",
"main": "src/index.ts",
packages/ui/test/ui.test.ts
+3 -6
View File
@@ -3196,12 +3196,9 @@ test("breadcrumb default separators remain visible without generated icon CSS",
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,
);
expect(source).toContain("--stats-max-width: 80rem");
expect(source).toContain("--stats-gutter-width: 4rem");
expect(source).toContain("calc(var(--stats-max-width) - var(--stats-gutter-width))");
});
test("mega menu bridges the gap between its trigger and panel", async () => {