Moved things around

frontend/vue-app/src/layout/AuthLayout.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="layout-root">
+    <header class="topbar">
+      <div class="back-btn-container">
+        <button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
+      </div>
+      <div class="spacer"></div>
+      <div class="spacer"></div>
+    </header>
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const router = useRouter()
+const route = useRoute()
+
+const handleBack = () => {
+  // route to the auth landing page instead of using browser history
+  router.push({ name: 'AuthLanding' }).catch(() => {
+    // fallback to a safe path if named route isn't available
+    window.location.href = '/auth'
+  })
+}
+
+// hide back button specifically on the Auth landing route
+const showBack = computed(
+  () =>
+    route.name !== 'AuthLanding' && route.name !== 'VerifySignup' && route.name !== 'ResetPassword',
+)
+</script>
+
+<style scoped>
+/* Only keep styles unique to ChildLayout */
+
+.topbar > .spacer {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+</style>