Added mobile responsiveness

src/lib/components/Footer.svelte

@@ -2,7 +2,7 @@
   import Heart from 'lucide-svelte/icons/heart'
 </script>
 
-<footer class="py-4 text-center text-muted-foreground">
+<footer class="py-4 text-center text-sm text-muted-foreground sm:text-base">
   <p>
     Made with
     <Heart class="inline fill-current text-primary" size={20} />
@@ -17,7 +17,7 @@
     </a>
   </p>
   <p>
-    Donations: <span class="font-medium text-primary">
+    Donations: <span class="break-all font-medium text-primary">
       0xD700F0dAb35B3076141d13807B05D4321A9B4f96
     </span>
   </p>

src/lib/components/ui/sonner/index.ts

@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte'

src/lib/components/ui/sonner/sonner.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+  import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner'
+  import { mode } from 'mode-watcher'
 
-	type $$Props = SonnerProps;
+  type $$Props = SonnerProps
 </script>
 
 <Sonner
-	theme={$mode}
-	class="toaster group"
-	toastOptions={{
-		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
-	}}
-	{...$$restProps}
+  theme={$mode}
+  class="toaster group"
+  toastOptions={{
+    classes: {
+      toast:
+        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+      description: 'group-[.toast]:text-muted-foreground',
+      actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+      cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+    },
+  }}
+  {...$$restProps}
 />

src/routes/+layout.svelte

@@ -6,6 +6,8 @@
 
 <Toaster />
 <div class="container mx-auto flex min-h-screen flex-col justify-between">
-  <slot />
+  <div class="flex flex-1 items-center justify-center">
+    <slot />
+  </div>
   <Footer />
 </div>

src/routes/verify/+page.svelte

@@ -21,7 +21,7 @@
 {#key loaded}
   <main class="flex flex-col items-center">
     <h1
-      class="pb-2 font-['Orbitron'] text-[min(5rem,15vw)] font-black leading-none"
+      class="pb-6 font-['Orbitron'] text-[min(5rem,15vw)] font-black leading-none sm:pb-2"
       in:slide={{ axis: 'x', duration: 900, easing: cubicInOut }}
     >
       0xVerify

src/routes/verify/Form.svelte

@@ -31,14 +31,14 @@
   class="flex flex-col gap-6"
   in:slide={{ delay: 400, duration: 500 }}
 >
-  <div class="flex gap-4">
+  <div class="flex flex-col gap-4 md:flex-row">
     <Form.Field {form} name="message" class="space-y-1">
       <Form.Control let:attrs>
         <Form.Label class="text-md">Message</Form.Label>
         <Textarea
           {...attrs}
           bind:value={$formData.message}
-          class="w-96"
+          class="w-[min(24rem,80vw)] md:w-[min(24rem,45vw)]"
           placeholder="Hello, World!"
         />
       </Form.Control>
@@ -51,7 +51,7 @@
         <Textarea
           {...attrs}
           bind:value={$formData.signatureHash}
-          class="w-96"
+          class="w-[min(24rem,80vw)] md:w-[min(24rem,45vw)]"
           placeholder="0x..."
         />
       </Form.Control>