fix: login match design reference

web/src/components/AuthShell.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { useSlots, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
+import AppLogo from '@/components/AppLogo.vue'
 
 const props = defineProps<{
 	title: string
@@ -7,6 +8,41 @@ const props = defineProps<{
 }>()
 
 const slots = useSlots()
+const titleEl = ref<HTMLHeadingElement | null>(null)
+const belowSm = ref(false)
+let mediaQuery: MediaQueryList | null = null
+
+function updateBelowSm() {
+	belowSm.value = mediaQuery?.matches ?? false
+}
+
+onMounted(() => {
+	if (typeof window.matchMedia === 'function') {
+		mediaQuery = window.matchMedia('(max-width: 39.9975rem)')
+		updateBelowSm()
+		mediaQuery.addEventListener('change', updateBelowSm)
+	}
+	titleEl.value?.focus()
+})
+
+onUnmounted(() => {
+	mediaQuery?.removeEventListener('change', updateBelowSm)
+})
+
+const controlSize = computed(() => (belowSm.value ? 'xl' : undefined))
+
+const mainClass = computed(() => [
+	'flex min-h-screen flex-col items-center pt-[12vh]',
+	belowSm.value ? 'bg-default px-5' : 'bg-muted px-0',
+])
+
+const cardClass = computed(() => (belowSm.value ? 'w-full' : 'w-full max-w-[400px]'))
+
+const cardUi = computed(() => ({
+	root: belowSm.value ? 'ring-0' : '',
+	container: belowSm.value ? 'p-5' : '',
+	header: 'mb-6',
+}))
 
 watch(
 	() => props.title,
@@ -15,26 +51,42 @@ watch(
 	},
 	{ immediate: true },
 )
+
+watch(
+	() => props.title,
+	() => {
+		titleEl.value?.focus()
+	},
+)
 </script>
 
 <template>
-	<main class="flex min-h-screen flex-col items-center bg-default px-5 pt-[12vh] sm:px-0">
-		<UAlert v-if="slots.notice" class="mb-4 w-full sm:max-w-[400px]">
+	<main :class="mainClass">
+		<UAlert v-if="slots.notice" :class="['mb-4', cardClass]">
 			<template #description>
 				<slot name="notice" />
 			</template>
 		</UAlert>
 
-		<UPageCard variant="outline" class="w-full sm:max-w-[400px]">
-			<span role="img" aria-label="RenewCMS" class="i-lucide-square inline-block h-8 w-8" />
+		<UPageCard
+			variant="outline"
+			:description="description"
+			:ui="cardUi"
+			data-testid="auth-card"
+			:class="cardClass"
+		>
+			<template #header>
+				<AppLogo :size="32" />
+			</template>
 
-			<h1>{{ title }}</h1>
-			<p v-if="description">{{ description }}</p>
+			<template #title>
+				<h1 ref="titleEl" tabindex="-1">{{ title }}</h1>
+			</template>
 
-			<slot />
+			<slot :control-size="controlSize" />
 		</UPageCard>
 
-		<footer class="mt-4 flex w-full items-center justify-between sm:max-w-[400px]">
+		<footer :class="['mt-4 flex w-full items-center justify-between', cardClass]">
 			<slot name="footer" />
 			<UColorModeSelect size="sm" />
 		</footer>