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
co-authored by
richardkenneth
richardkenneth
parent
6537613000
commit
f0695e9d18
Vendored
+1
@@ -18,6 +18,7 @@
|
||||
],
|
||||
"deno.importMap": "./supabase/functions/import_map.json",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.wordWrap": "on",
|
||||
"[svelte]": {
|
||||
"editor.defaultFormatter": "svelte.svelte-vscode"
|
||||
},
|
||||
|
||||
@@ -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 />
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
{sideOffset}
|
||||
{preventScroll}
|
||||
class={cn(
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:max-h-(--bits-dropdown-menu-content-available-height) ui:origin-(--bits-dropdown-menu-content-transform-origin) ui:z-50 ui:min-w-32 ui:overflow-y-auto ui:overflow-x-hidden ui:rounded-md ui:border ui:p-1 ui:shadow-md ui:outline-none',
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:max-h-(--bits-dropdown-menu-content-available-height) ui:origin-(--bits-dropdown-menu-content-transform-origin) ui:z-menu-elevated ui:min-w-32 ui:overflow-y-auto ui:overflow-x-hidden ui:rounded-md ui:border ui:p-1 ui:shadow-md ui:outline-none',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
bind:ref
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
class={cn(
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:origin-(--bits-dropdown-menu-content-transform-origin) ui:z-50 ui:min-w-32 ui:overflow-hidden ui:rounded-md ui:border ui:p-1 ui:shadow-lg',
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:origin-(--bits-dropdown-menu-content-transform-origin) ui:z-menu-elevated ui:min-w-32 ui:overflow-hidden ui:rounded-md ui:border ui:p-1 ui:shadow-lg',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
{sideOffset}
|
||||
{align}
|
||||
class={cn(
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:origin-(--bits-popover-content-transform-origin) ui:outline-hidden ui:z-50 ui:w-72 ui:rounded-md ui:border ui:p-4 ui:shadow-md',
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:origin-(--bits-popover-content-transform-origin) ui:outline-hidden ui:z-menu-elevated ui:w-72 ui:rounded-md ui:border ui:p-4 ui:shadow-md',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
{sideOffset}
|
||||
data-slot="select-content"
|
||||
class={cn(
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:max-h-(--bits-select-content-available-height) ui:origin-(--bits-select-content-transform-origin) ui:relative ui:z-50 ui:min-w-32 ui:overflow-y-auto ui:overflow-x-hidden ui:rounded-md ui:border ui:shadow-md ui:data-[side=bottom]:translate-y-1 ui:data-[side=left]:-translate-x-1 ui:data-[side=right]:translate-x-1 ui:data-[side=top]:-translate-y-1',
|
||||
'ui:bg-popover ui:text-popover-foreground ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2 ui:max-h-(--bits-select-content-available-height) ui:origin-(--bits-select-content-transform-origin) ui:relative ui:z-menu-elevated ui:min-w-32 ui:overflow-y-auto ui:overflow-x-hidden ui:rounded-md ui:border ui:shadow-md ui:data-[side=bottom]:translate-y-1 ui:data-[side=left]:-translate-x-1 ui:data-[side=right]:translate-x-1 ui:data-[side=top]:-translate-y-1',
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
|
||||
Reference in New Issue
Block a user