Tweak layout css

src/lib/components/PageBar.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+
   interface Props {
-    icon?: import("svelte").Snippet
-    title?: import("svelte").Snippet
-    action?: import("svelte").Snippet
+    icon?: Snippet
+    title?: Snippet
+    action?: Snippet
     [key: string]: any
   }
 
   const {...props}: Props = $props()
 </script>
 
-<div class="relative z-feature rounded-xl px-2 pt-2 {props.class}">
+<div class="sait cw fixed top-2 z-feature rounded-xl px-2 pt-2 {props.class}">
   <div
     class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
     <div class="ellipsize flex items-center gap-4 whitespace-nowrap">

src/lib/components/PageContent.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    element?: Element
+    children?: Snippet
+    [key: string]: any
+  }
+
+  let {children, element = $bindable(), ...props}: Props = $props()
+</script>
+
+<div
+  {...props}
+  bind:this={element}
+  class="scroll-container saib cw fixed top-12 h-[calc(100%-6.5rem)] overflow-y-auto overflow-x-hidden md:h-[calc(100%-3rem)] {props.class}">
+  {@render children?.()}
+</div>