feat: improve auth pages

app/layouts/auth.vue

@@ -1,14 +1,27 @@
 <script setup lang="ts">
+// TODO: when a user changes the color scheme and then signs in/up, the color
+// scheme will not be updated in the user's settings.
+const { colorScheme } = await useUserSettings();
+
+useHead({
+    htmlAttrs: {
+        class: colorScheme.class
+    }
+});
+
 preloadRouteComponents('/');
 </script>
 
 <template>
-    <div class="h-full w-full grid place-items-center">
-        <div
-            class="max-w-xs p-4 bg-[var(--bg-surface)] border border-solid border-[var(--color-border)] w-full rounded-lg">
+    <main
+        class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
+        <div class="flex-1 overflow-y-auto">
             <slot />
         </div>
-    </div>
+    </main>
+    <ClientOnly>
+        <Dropdown />
+    </ClientOnly>
 </template>
 
 <style>