Use snapshots in some places

src/lib/components/InputProfilePicture.svelte

@@ -4,11 +4,11 @@
   import Icon from "@lib/components/Icon.svelte"
 
   interface Props {
-    file?: File | null
-    url?: string | null
+    file?: File | undefined
+    url?: string | undefined
   }
 
-  let {file = $bindable(null), url = $bindable(null)}: Props = $props()
+  let {file = $bindable(), url = $bindable()}: Props = $props()
 
   const id = randomId()
 
@@ -35,9 +35,9 @@
   }
 
   const onClear = () => {
-    initialUrl = null
-    file = null
-    url = null
+    initialUrl = undefined
+    file = undefined
+    url = undefined
   }
 
   let active = $state(false)

src/lib/components/Page.svelte

@@ -8,6 +8,6 @@
 </script>
 
 <div
-  class="sait saib sair scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {props.class}">
+  class="sait saib sair scroll-container mb-14 max-h-screen flex-grow overflow-auto bg-base-200 md:mb-0 {props.class}">
   {@render props.children?.()}
 </div>