fix(dashboard): Certain menus inside of modals are hidden (#875)

* fix: update z-index utility class for Select component across tag category and tutor selection views * refactor: standardize z-index management using ui:z-menu-elevated, ui:z-app-bar, ui:z-app-bar-elevated and ui:z-modal classes across UI components --------- Co-authored-by: richardkenneth <[email protected]>
2026-08-12 07:09:54 +01:00
parent 6537613000
commit f0695e9d18
17 changed files with 20 additions and 45 deletions
@@ -8,32 +8,6 @@

@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-modal {
-  z-index: 200;
-}
-
-@utility z-menu-elevated {
-  z-index: 250;
-}
-
 /* Geist variable font — self-hosted */
@font-face {
  font-family: 'Geist';
@@ -229,7 +229,7 @@
            </Button>
          {/snippet}
        </Popover.Trigger>
-        <Popover.Content class="ui:p-0! z-200! w-72" align="center">
+        <Popover.Content class="ui:p-0! w-72" align="center">
          <ChatHistoryPopover
            {conversations}
            {activeConversationId}
@@ -5,7 +5,7 @@
 </script>

 <header
-  class="border-border ui:bg-background z-app-bar sticky top-0 flex h-12 w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8"
+  class="border-border ui:bg-background ui:z-app-bar sticky top-0 flex h-12 w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8"
 >
  <div class="flex w-full items-center gap-2 px-4">
    <Sidebar.Trigger />
@@ -29,7 +29,7 @@
 {#if !isOrgLoaded}
  <SidebarSkeleton />
 {:else}
-  <Sidebar.Root collapsible="icon">
+  <Sidebar.Root collapsible="icon" class="ui:z-app-bar-elevated">
    <Sidebar.Header>
      <OrgLogo />
    </Sidebar.Header>
@@ -59,7 +59,7 @@
 </script>

 <header
-  class="border-border ui:bg-background z-app-bar sticky top-0 flex h-12 w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8"
+  class="border-border ui:bg-background ui:z-app-bar sticky top-0 flex h-12 w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8"
 >
  <div class="flex w-full items-center gap-2 px-4">
    <Sidebar.Trigger />
@@ -296,7 +296,7 @@
              >
                <EllipsisVerticalIcon class="h-5 w-5" />
              </DropdownMenu.Trigger>
-              <DropdownMenu.Content align="end" class="z-menu-elevated">
+              <DropdownMenu.Content align="end">
                <DropdownMenu.Item
                  class="text-red-600"
                  onclick={() => {
@@ -366,7 +366,7 @@
              <Select.Trigger class="w-full">
                {status.text}
              </Select.Trigger>
-              <Select.Content class="z-menu-elevated">
+              <Select.Content>
                {#each SELECTABLE_STATUS as statusOption}
                  <Select.Item value={statusOption.id.toString()}>
                    {statusOption.text}
@@ -339,7 +339,7 @@

 <!-- PDF Viewer Modal -->
 {#if pdfViewerOpen}
-  <div class="z-modal fixed inset-0 flex flex-col bg-white dark:bg-neutral-800">
+  <div class="ui:z-modal fixed inset-0 flex flex-col bg-white dark:bg-neutral-800">
    <!-- Header -->
    <div class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3 dark:bg-neutral-800">
      <div class="flex items-center space-x-4">
@@ -118,7 +118,7 @@
 {#if !isOrgLoaded}
  <SidebarSkeleton />
 {:else}
-  <Sidebar.Root collapsible="icon" class="z-app-bar-elevated!" mobileOverlayClass="z-app-bar-elevated!">
+  <Sidebar.Root collapsible="icon" class="ui:z-app-bar-elevated" mobileOverlayClass="ui:z-app-bar-elevated">
    <Sidebar.Header>
      <CourseSidebarLogo isStudent={$isStudentExperience} />
    </Sidebar.Header>
@@ -592,7 +592,7 @@
  }
 </script>

-<Page.Header isSticky={true} class="z-app-bar! top-12! min-h-[36px]">
+<Page.Header isSticky={true} class="ui:z-app-bar top-12! min-h-[36px]">
  <Page.HeaderContent>
    <Page.Title class="flex flex-col gap-2">
      <span>{exerciseDisplayTitle}</span>
@@ -638,7 +638,7 @@
                      </Button>
                    {/snippet}
                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content align="end" class="z-menu-elevated!">
+                  <DropdownMenu.Content align="end">
                    <DropdownMenu.Item onclick={addSectionFromHeader}>
                      {$t('course.navItem.lessons.exercises.all_exercises.add_section')}
                    </DropdownMenu.Item>
@@ -677,7 +677,7 @@
                      </Button>
                    {/snippet}
                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content align="end" class="z-menu-elevated!">
+                  <DropdownMenu.Content align="end">
                    {#if hasSections($questionnaire.sections)}
                      <DropdownMenu.Item onclick={() => (reorderQuestions = !reorderQuestions)}>
                        {reorderQuestions
@@ -148,7 +148,7 @@
    <div class="hidden shrink-0 md:block md:w-(--side-panel-width)"></div>

    <aside
-      class="ui:bg-background z-app-bar fixed inset-y-0 right-0 flex h-screen w-full flex-col border-l md:w-(--side-panel-width)"
+      class="ui:bg-background ui:z-app-bar fixed inset-y-0 right-0 flex h-screen w-full flex-col border-l md:w-(--side-panel-width)"
      aria-label={t.get(def.titleKey)}
    >
      <button
@@ -383,7 +383,7 @@
                : $t('tags_admin.tag_modal.select_category')}
            </p>
          </Select.Trigger>
-          <Select.Content class="z-menu-elevated">
+          <Select.Content>
            {#each tagApi.tagGroups as group (group.id)}
              <Select.Item value={group.id}>{group.name}</Select.Item>
            {/each}
@@ -409,7 +409,7 @@
              </Button>
            {/snippet}
          </Popover.Trigger>
-          <Popover.Content align="start" class="z-250! w-44 p-3">
+          <Popover.Content align="start" class="w-44 p-3">
            <div class="grid grid-cols-5 gap-2">
              {#each TAG_COLOR_OPTIONS as color (color)}
                <Button
@@ -49,7 +49,7 @@
      <Select.Trigger class="w-full">
        <p>{course.currency === 'NGN' ? 'NGN' : 'USD'}</p>
      </Select.Trigger>
-      <Select.Content class="z-menu-elevated">
+      <Select.Content>
        <Select.Item value="NGN">NGN</Select.Item>
        <Select.Item value="USD">USD</Select.Item>
      </Select.Content>