From 553c126e3c25261ba1e1f75e891c6a8073960de4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 10 Jul 2026 05:15:39 +0000
Subject: [PATCH] fix(sidebar): raise mobile sidebar above sticky lesson
 headers

Restore lesson/exercise page header z-100 stacking and fix the overlap
by lifting the mobile sidebar sheet and overlay to z-150, matching the
desktop course sidebar.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
---
 .../dashboard/src/lib/features/course/pages/exercise.svelte | 2 +-
 apps/dashboard/src/lib/features/course/pages/lesson.svelte  | 2 +-
 packages/ui/src/base/sheet/sheet-content.svelte             | 4 +++-
 packages/ui/src/base/sidebar/sidebar.svelte                 | 6 +++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/lib/features/course/pages/exercise.svelte b/apps/dashboard/src/lib/features/course/pages/exercise.svelte
index 68a68516..ffa93264 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 @@
   }
 </script>
 
-<Page.Header isSticky={true} class="top-12! min-h-[36px]">
+<Page.Header isSticky={true} class="top-12! z-100! min-h-[36px]">
   <Page.HeaderContent>
     <Page.Title class="flex flex-col gap-2">
       <span>{exerciseDisplayTitle}</span>
diff --git a/apps/dashboard/src/lib/features/course/pages/lesson.svelte b/apps/dashboard/src/lib/features/course/pages/lesson.svelte
index 7d389425..6a970e60 100644
--- a/apps/dashboard/src/lib/features/course/pages/lesson.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/lesson.svelte
@@ -387,7 +387,7 @@
   }}
 />
 
-<Page.Header isSticky={true} class="top-12! min-h-[36px]">
+<Page.Header>
   <Page.HeaderContent>
     <LessonPageEditHeader
       {mode}
diff --git a/packages/ui/src/base/sheet/sheet-content.svelte b/packages/ui/src/base/sheet/sheet-content.svelte
index 2a143a2b..c6677155 100644
--- a/packages/ui/src/base/sheet/sheet-content.svelte
+++ b/packages/ui/src/base/sheet/sheet-content.svelte
@@ -32,17 +32,19 @@
     class: className,
     side = 'right',
     portalProps,
+    overlayClass,
     children,
     ...restProps
   }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
     portalProps?: SheetPrimitive.PortalProps;
     side?: Side;
+    overlayClass?: string;
     children: Snippet;
   } = $props();
 </script>
 
 <SheetPrimitive.Portal {...portalProps}>
-  <SheetOverlay />
+  <SheetOverlay class={overlayClass} />
   <SheetPrimitive.Content
     bind:ref
     data-slot="sheet-content"
diff --git a/packages/ui/src/base/sidebar/sidebar.svelte b/packages/ui/src/base/sidebar/sidebar.svelte
index 389bfee2..010f149d 100644
--- a/packages/ui/src/base/sidebar/sidebar.svelte
+++ b/packages/ui/src/base/sidebar/sidebar.svelte
@@ -39,7 +39,11 @@
       data-sidebar="sidebar"
       data-slot="sidebar"
       data-mobile="true"
-      class="ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:p-0 ui:[&>button]:hidden"
+      overlayClass="ui:z-150!"
+      class={cn(
+        'ui:bg-sidebar ui:text-sidebar-foreground ui:w-(--sidebar-width) ui:z-150! ui:p-0 ui:[&>button]:hidden',
+        className
+      )}
       style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
       {side}
     >