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]>
This commit is contained in:
Richard Kenneth
2026-08-12 07:09:54 +01:00
committed by GitHub
co-authored by richardkenneth
parent 6537613000
commit f0695e9d18
17 changed files with 20 additions and 45 deletions
@@ -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