[AppLayout] Use margin instead of padding on main to not conflict wit…

…h `<main class="p-4">` usage
techniq · Jun 21, 2024 · 11b68b0 · 11b68b0
1 parent 91b58c5
commit 11b68b0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/popular-steaks-help.md b/.changeset/popular-steaks-help.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[AppLayout] Use margin instead of padding on main to not conflict with `<main class="p-4">` usage
diff --git a/packages/svelte-ux/src/lib/components/AppLayout.svelte b/packages/svelte-ux/src/lib/components/AppLayout.svelte
@@ -38,7 +38,13 @@
   style:--areas={areas}
   class={cls(
     'AppLayout',
-    'grid grid-cols-[auto,1fr] grid-rows-[var(--headerHeight),1fr] h-screen',
+    '[&>header]:fixed [&>header]:top-0 [&>header]:h-[var(--headerHeight)] [&>header]:transition-all',
+    headerPosition === 'full' || temporaryDrawer
+      ? '[&>header]:w-full'
+      : '[&>header]:w-[calc(100%-var(--drawerWidth))] [&>header]:left-[var(--drawerWidth)] [&>header]:duration-500',
+    '[&>main]:md:ml-[var(--drawerWidth)] [&>main]:mt-[var(--headerHeight)] [&>main]:transition-[margin] [&>main]:duration-500',
+    /* Fix scrolling offset for headings (h1, ...) or other elements with an id set (`<a href="#id">`) */
+    '[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
     settingsClasses.root,
     classes.root,
     $$props.class