ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 <[email protected]>

* 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.
---------
This commit is contained in:
Rotimi Best
2026-07-10 06:19:37 +01:00
committed by GitHub
parent be0085f090 553c126e3c
commit 893681de3e
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/base/sheet/sheet-content.svelte
+3 -1
View File
@@ -32,17 +32,19 @@
class: className, class: className,
side = 'right', side = 'right',
portalProps, portalProps,
overlayClass,
children, children,
...restProps ...restProps
}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & { }: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
portalProps?: SheetPrimitive.PortalProps; portalProps?: SheetPrimitive.PortalProps;
side?: Side; side?: Side;
overlayClass?: string;
children: Snippet; children: Snippet;
} = $props(); } = $props();
</script> </script>
<SheetPrimitive.Portal {...portalProps}> <SheetPrimitive.Portal {...portalProps}>
<SheetOverlay /> <SheetOverlay class={overlayClass} />
<SheetPrimitive.Content <SheetPrimitive.Content
bind:ref bind:ref
data-slot="sheet-content" data-slot="sheet-content"
packages/ui/src/base/sidebar/sidebar.svelte
+5 -1
View File
@@ -39,7 +39,11 @@
data-sidebar="sidebar" data-sidebar="sidebar"
data-slot="sidebar" data-slot="sidebar"
data-mobile="true" 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};" style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
{side} {side}
> >