WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 16 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
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;