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>

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>

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}

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"

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}
     >