diff --git a/apps/ui/CONTRIBUTING.md b/apps/ui/CONTRIBUTING.md index ded4849606..c8d009b0c4 100644 --- a/apps/ui/CONTRIBUTING.md +++ b/apps/ui/CONTRIBUTING.md @@ -69,6 +69,25 @@ budget — keep new dependencies/imports lean. than hand-rolling `rounded border bg-card`. - External links: use `` from `@jsonbored/ui-kit`, not a raw `` — it sets `rel=noreferrer` and filters unsafe/private URLs. + - Stacking order: use one of the named `--mg-z-*` layer tokens + (`packages/ui-kit/src/styles.css`), never a bare `z-10`/`z-20`/etc. or a + one-off `z-[N]`. From lowest to highest: + + | Token | Value | Use for | + | ------------------ | ----- | ------------------------------------------------------------------------ | + | `--mg-z-sticky` | 10 | Sticky theads/toolbars, scroll shadows, in-flow progress bars | + | `--mg-z-raised` | 20 | Elements that must clear sticky content within the same page section | + | `--mg-z-nav` | 30 | Site header/nav chrome | + | `--mg-z-overlay` | 40 | Drawers, back-to-top, hover cards, lightweight menus | + | `--mg-z-modal` | 50 | Dialogs, popovers, sheets, command palette (matches Radix's own default) | + | `--mg-z-progress` | 60 | Route-transition progress bar — must beat modal | + | `--mg-z-skip-link` | 100 | a11y skip-link — must beat everything | + + The only standing exception: the sticky corner cell in the two compare + drawers (`subnets-compare-drawer.tsx`, `validators-compare-drawer.tsx`) uses + raw `z-[1]`/`z-[2]` for micro-stacking inside the table's own local + stacking context — not a global layer, so it doesn't belong on this scale. + - See `docs/ssr-safety.md` for the hydration-safety rules (also partly ESLint-enforced). - Keep diffs focused. Don't reformat or refactor unrelated files in a feature PR. diff --git a/apps/ui/eslint.config.ts b/apps/ui/eslint.config.ts index 75e9291ecc..ac03ad6c0e 100644 --- a/apps/ui/eslint.config.ts +++ b/apps/ui/eslint.config.ts @@ -116,6 +116,17 @@ const ELEVATION_RULES = [ }, ]; +// #7841: bare z-* stacking steps collapsed into a named --mg-z-* layer scale +// (packages/ui-kit/src/styles.css). Also flags the 6 documented z-[1]/z-[2] +// sticky-cell micro-stacking exceptions in the two compare drawers -- that's +// intentional (matches the residual-worklist convention other guardrails use). +const Z_INDEX_RULES = [ + { + selector: "Literal[value=/\\bz-(\\[[0-9]+\\]|[0-9]+\\b)/]", + message: "Raw z-index step. Use one of the --mg-z-* layer tokens (see styles.css).", + }, +]; + export default tseslint.config( // .source is fumadocs-mdx's generated content collection output (see // source.config.ts) -- codegen, not authored code, same treatment as dist. @@ -184,6 +195,7 @@ export default tseslint.config( ...PRIMITIVE_STEER_RULES, ...SSR_SAFETY_RULES, ...ELEVATION_RULES, + ...Z_INDEX_RULES, ], }, }, diff --git a/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx b/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx index 2d7e47d5c8..fa7175198c 100644 --- a/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx +++ b/apps/ui/src/components/metagraphed/analytics/coverage-matrix.tsx @@ -137,7 +137,7 @@ export function CoverageMatrix({ topN = 24 }: { topN?: number }) { - {KINDS.map((k) => ( @@ -159,7 +159,7 @@ export function CoverageMatrix({ topN = 24 }: { topN?: number }) { key={r.netuid} className="border-b border-border last:border-b-0 hover:bg-paper/30" > -
+ Subnet +
Skip to main content {/* Top bar */}