From 0836d9b5bbefeaa633c7ce112f5e7b00c0719406 Mon Sep 17 00:00:00 2001 From: Rotimi Best Date: Sat, 11 Jul 2026 08:25:11 +0100 Subject: [PATCH] refactor(z-index): introduce a shared named z-index scale (#723) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(z-index): introduce a shared named z-index scale Replace scattered magic z-index numbers (100, 150, 200, 201, 250) with named layers (z-app-bar, z-app-bar-elevated, z-modal, z-menu-elevated) so intent is documented at each call site and future additions insert predictably instead of colliding. Defined via Tailwind's @utility directive in two places that mirror each other: packages/ui/src/index.css (ui:-prefixed, for components that live in the @cio/ui package) and apps/dashboard/src/app.css (unprefixed, for dashboard-only files) — a ui:-prefixed custom utility only compiles if it is also used somewhere under packages/ui/src, so dashboard-only usages need the unprefixed twin. Also fixes two pre-existing dropdown/select menus (tags-admin.svelte, mark-exercise-modal.svelte) that used ui:z-[250], which never actually compiled to any CSS rule since nothing under packages/ui/src used that exact class. Co-authored-by: Rotimi Best * fix(ui): safelist the packaged z-index scale so it always compiles @utility only emits a class when Tailwind's scanner sees that exact candidate under packages/ui/src, so ui:z-app-bar-elevated and ui:z-menu-elevated were documented but silently missing from the compiled @cio/ui CSS since nothing inside the package itself used them. Safelist all four layers via @source inline() so the shipped scale always matches what's documented, regardless of which layers this package happens to reference internally. Co-authored-by: Rotimi Best --------- Co-authored-by: Cursor Agent Co-authored-by: Rotimi Best --- apps/dashboard/src/app.css | 22 +++++++++ .../cohort/components/cohort-header.svelte | 2 +- .../course/components/course-header.svelte | 2 +- .../exercise/mark-exercise-modal.svelte | 4 +- .../components/sidebar/course-sidebar.svelte | 2 +- .../lib/features/course/pages/exercise.svelte | 6 +-- .../side-panel/side-panel-rail.svelte | 2 +- .../lib/features/tag/pages/tags-admin.svelte | 2 +- .../ui/src/base/dialog/dialog-content.svelte | 2 +- .../ui/src/base/dialog/dialog-overlay.svelte | 2 +- packages/ui/src/base/sidebar/sidebar.svelte | 2 +- packages/ui/src/index.css | 47 +++++++++++++++++++ packages/ui/src/output.css | 2 +- 13 files changed, 83 insertions(+), 14 deletions(-) diff --git a/apps/dashboard/src/app.css b/apps/dashboard/src/app.css index eed3ee62..d01b8942 100644 --- a/apps/dashboard/src/app.css +++ b/apps/dashboard/src/app.css @@ -8,6 +8,28 @@ @custom-variant dark (&:where(.dark, .dark *)); +/** + * Shared z-index scale, mirrored from `packages/ui/src/index.css`. + * + * Dashboard code has its own (unprefixed) Tailwind pipeline, separate from `@cio/ui`'s + * `ui:`-prefixed one — a `ui:`-prefixed utility only compiles if that exact class string is + * also used somewhere under `packages/ui/src`. So dashboard-only usages (page headers, the + * course sidebar, dropdowns/selects that need to escape a sticky header or a modal) must use + * these unprefixed names instead. Keep the two scales numerically in sync; see + * `packages/ui/README.md` for the full write-up of each layer. + */ +@utility z-app-bar { + z-index: 100; +} + +@utility z-app-bar-elevated { + z-index: 150; +} + +@utility z-menu-elevated { + z-index: 250; +} + /* Geist variable font — self-hosted */ @font-face { font-family: 'Geist'; diff --git a/apps/dashboard/src/lib/features/cohort/components/cohort-header.svelte b/apps/dashboard/src/lib/features/cohort/components/cohort-header.svelte index dc0a7d09..d0db1033 100644 --- a/apps/dashboard/src/lib/features/cohort/components/cohort-header.svelte +++ b/apps/dashboard/src/lib/features/cohort/components/cohort-header.svelte @@ -5,7 +5,7 @@
diff --git a/apps/dashboard/src/lib/features/course/components/course-header.svelte b/apps/dashboard/src/lib/features/course/components/course-header.svelte index 35150164..18ccd09a 100644 --- a/apps/dashboard/src/lib/features/course/components/course-header.svelte +++ b/apps/dashboard/src/lib/features/course/components/course-header.svelte @@ -58,7 +58,7 @@
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/mark-exercise-modal.svelte b/apps/dashboard/src/lib/features/course/components/exercise/mark-exercise-modal.svelte index 8e00b28f..6dad6499 100644 --- a/apps/dashboard/src/lib/features/course/components/exercise/mark-exercise-modal.svelte +++ b/apps/dashboard/src/lib/features/course/components/exercise/mark-exercise-modal.svelte @@ -296,7 +296,7 @@ > - + { @@ -366,7 +366,7 @@ {status.text} - + {#each SELECTABLE_STATUS as statusOption} {statusOption.text} diff --git a/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte b/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte index 3c990ce8..f0e1533a 100644 --- a/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte +++ b/apps/dashboard/src/lib/features/course/components/sidebar/course-sidebar.svelte @@ -112,7 +112,7 @@ {#if !isOrgLoaded} {:else} - + diff --git a/apps/dashboard/src/lib/features/course/pages/exercise.svelte b/apps/dashboard/src/lib/features/course/pages/exercise.svelte index ffa93264..4ebe743c 100644 --- a/apps/dashboard/src/lib/features/course/pages/exercise.svelte +++ b/apps/dashboard/src/lib/features/course/pages/exercise.svelte @@ -405,7 +405,7 @@ } - + {exerciseDisplayTitle} @@ -451,7 +451,7 @@ {/snippet} - + {$t('course.navItem.lessons.exercises.all_exercises.add_section')} @@ -490,7 +490,7 @@ {/snippet} - + {#if hasSections($questionnaire.sections)} (reorderQuestions = !reorderQuestions)}> {reorderQuestions diff --git a/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte b/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte index 1afcd227..922cf0d7 100644 --- a/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte +++ b/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte @@ -148,7 +148,7 @@