From b88872512502b5f9dcd3b27742f88e0640855201 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 07:36:06 +0000
Subject: [PATCH] fix(sidebar): scope elevated mobile z-index to course sidebar

Remove the global z-150 mobile sheet stacking from Sidebar.Root so LMS
and org sidebars keep the default sheet layer. Course sidebar opts in via
mobileOverlayClass and its existing z-150 class.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 .../course/components/sidebar/course-sidebar.svelte         | 2 +-
 packages/ui/src/base/sidebar/sidebar.svelte                 | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

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 438432d5..3c990ce8 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}
   <SidebarSkeleton />
 {:else}
-  <Sidebar.Root collapsible="icon" class="ui:z-150!">
+  <Sidebar.Root collapsible="icon" class="ui:z-150!" mobileOverlayClass="ui:z-150!">
     <Sidebar.Header>
       <CourseSidebarLogo />
     </Sidebar.Header>
diff --git a/packages/ui/src/base/sidebar/sidebar.svelte b/packages/ui/src/base/sidebar/sidebar.svelte
index 010f149d..3edd08f8 100644
--- a/packages/ui/src/base/sidebar/sidebar.svelte
+++ b/packages/ui/src/base/sidebar/sidebar.svelte
@@ -11,12 +11,14 @@
     variant = 'sidebar',
     collapsible = 'offcanvas',
     class: className,
+    mobileOverlayClass,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';
+    mobileOverlayClass?: string;
   } = $props();
 
   const sidebar = useSidebar();
@@ -39,9 +41,9 @@
       data-sidebar="sidebar"
       data-slot="sidebar"
       data-mobile="true"
-      overlayClass="ui:z-150!"
+      overlayClass={mobileOverlayClass}
       class={cn(
-        'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:z-150! ui:p-0 ui:[&>button]:hidden',
+        'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:p-0 ui:[&>button]:hidden',
         className
       )}
       style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"