fix(sidebar): raise mobile sidebar above sticky lesson headers (#719)

* fix(course): keep lesson header below mobile sidebar

Remove the z-100 override on sticky lesson/exercise page headers so they
stack below the mobile sidebar sheet (z-50). Also make the lesson page
header sticky to match the exercise page.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* 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.
---------

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