fix: changed frontend workflow and fixed login reference matching for real

web/src/components/AuthShell.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, useSlots, watch } from 'vue'
 import AppLogo from '@/components/AppLogo.vue'
+import { isInAppNavigation } from '@/composables/useAuthShellNavigation'
 
 const props = defineProps<{
 	title: string
@@ -22,7 +23,9 @@ onMounted(() => {
 		updateBelowSm()
 		mediaQuery.addEventListener('change', updateBelowSm)
 	}
-	titleEl.value?.focus()
+	if (isInAppNavigation()) {
+		titleEl.value?.focus()
+	}
 })
 
 onUnmounted(() => {
@@ -30,20 +33,30 @@ onUnmounted(() => {
 })
 
 const controlSize = computed(() => (belowSm.value ? 'xl' : undefined))
+const controlClass = computed(() => (belowSm.value ? '!h-11 !text-base' : '!h-10 !text-sm'))
 
 const mainClass = computed(() => [
-	'flex min-h-screen flex-col items-center pt-[12vh]',
-	belowSm.value ? 'bg-default px-5' : 'bg-muted px-0',
+	'flex min-h-screen flex-col items-center',
+	belowSm.value ? 'bg-default' : 'bg-muted pt-[12vh]',
 ])
 
 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' : '',
+	container: belowSm.value ? 'pt-2 px-5 pb-0' : 'p-10',
 	header: 'mb-6',
+	title: 'text-xl font-semibold leading-7',
 }))
 
+const footerClass = computed(() => [
+	'mt-4 flex w-full items-center justify-between',
+	belowSm.value ? 'pt-0 px-5 pb-6' : 'p-0',
+	cardClass.value,
+])
+
+const colorModeSelectUi = { trailing: 'hidden' }
+
 watch(
 	() => props.title,
 	(title) => {
@@ -62,12 +75,6 @@ watch(
 
 <template>
 	<main :class="mainClass">
-		<UAlert v-if="slots.notice" :class="['mb-4', cardClass]">
-			<template #description>
-				<slot name="notice" />
-			</template>
-		</UAlert>
-
 		<UPageCard
 			variant="outline"
 			:description="description"
@@ -80,15 +87,19 @@ watch(
 			</template>
 
 			<template #title>
-				<h1 ref="titleEl" tabindex="-1">{{ title }}</h1>
+				<h1 ref="titleEl" tabindex="-1" class="outline-none">{{ title }}</h1>
 			</template>
 
-			<slot :control-size="controlSize" />
+			<div v-if="slots.notice" class="mb-4">
+				<slot name="notice" />
+			</div>
+
+			<slot :control-size="controlSize" :control-class="controlClass" />
 		</UPageCard>
 
-		<footer :class="['mt-4 flex w-full items-center justify-between', cardClass]">
+		<footer :class="footerClass">
 			<slot name="footer" />
-			<UColorModeSelect size="sm" />
+			<UColorModeSelect size="sm" class="ms-auto" :ui="colorModeSelectUi" />
 		</footer>
 	</main>
 </template>