Bring packages and UI library up to date

webapp/src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ModeWatcher } from 'mode-watcher'
+import { mode, ModeWatcher } from 'mode-watcher'
 import { Toaster } from 'svelte-sonner'
 
 import Footer from '$lib/layouts/Footer.svelte'
@@ -10,9 +10,9 @@ const unsupported = navigator.requestMIDIAccess === undefined
 </script>
 
 <ModeWatcher />
-<Toaster position="bottom-center" duration={2000} />
+<Toaster position="bottom-center" duration={2000} theme={mode.current} invert />
 
-<div class="max-w-screen-xl min-h-dvh m-auto p-6 stack gap-4">
+<div class="max-w-7xl min-h-dvh m-auto p-6 stack gap-4">
   {#if unsupported}
     <Unsupported />
   {:else}