Compact admin layout and preserve admin scroll

frontend/src/components/AppShell.vue

@@ -31,6 +31,7 @@ const currentLabel = computed(
 const visibleNavItems = computed(() =>
   navItems.filter((item) => item.to !== '/admin' || authStore.isAdmin),
 )
+const isAdminRoute = computed(() => route.path.startsWith('/admin'))
 
 async function login(role: 'viewer' | 'admin') {
   loginError.value = ''
@@ -56,15 +57,21 @@ async function login(role: 'viewer' | 'admin') {
         <span>{{ currentLabel }}</span>
       </div>
 
-      <header class="mb-10 flex flex-col gap-6 rounded-[34px] border border-white/70 bg-white/72 px-5 py-5 shadow-[0_24px_80px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7">
-        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
+      <header
+        class="flex flex-col rounded-[24px] border border-white/70 bg-white/72 shadow-[0_18px_55px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7"
+        :class="isAdminRoute ? 'mb-5 gap-3 px-4 py-3' : 'mb-10 gap-6 px-5 py-5'"
+      >
+        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between" :class="isAdminRoute ? 'gap-3' : 'gap-5'">
           <RouterLink to="/" class="flex items-center gap-4 text-slate-800 no-underline">
-            <div class="grid h-12 w-12 place-items-center rounded-[1.4rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]">
-              <Star class="h-5 w-5" />
+            <div
+              class="grid place-items-center rounded-[1.1rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]"
+              :class="isAdminRoute ? 'h-10 w-10' : 'h-12 w-12'"
+            >
+              <Star :class="isAdminRoute ? 'h-4 w-4' : 'h-5 w-5'" />
             </div>
             <div>
               <strong class="block text-sm tracking-[0.35em]">VTUBER</strong>
-              <span class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
+              <span v-if="!isAdminRoute" class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
             </div>
           </RouterLink>
 
@@ -96,7 +103,7 @@ async function login(role: 'viewer' | 'admin') {
           <p v-if="loginError" class="mt-3 text-sm text-rose-700">{{ loginError }}</p>
         </div>
 
-        <div class="flex flex-col gap-4 border-t border-black/6 pt-4 lg:flex-row lg:items-center lg:justify-between">
+        <div class="flex flex-col gap-3 border-t border-black/6 pt-3 lg:flex-row lg:items-center lg:justify-between">
           <nav class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
             <RouterLink
               v-for="item in visibleNavItems"

frontend/src/components/admin/AdminPageHeader.vue

@@ -7,9 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="space-y-3">
+  <div class="flex flex-col gap-2 border-b border-violet-100 pb-4 md:flex-row md:items-end md:justify-between">
+    <div>
     <p v-if="eyebrow" class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">{{ eyebrow }}</p>
-    <h2 class="font-[Cormorant_Garamond] text-5xl leading-[0.95] text-violet-800">{{ title }}</h2>
-    <p class="max-w-3xl text-base leading-7 text-slate-600">{{ description }}</p>
+      <h2 class="mt-1 text-2xl font-semibold text-slate-900">{{ title }}</h2>
+    </div>
+    <p class="max-w-xl text-sm leading-6 text-slate-500">{{ description }}</p>
   </div>
 </template>

frontend/src/components/admin/AdminSeasonToolbar.vue

@@ -26,22 +26,18 @@ const currentSeason = computed(() => store.adminSeasonDetail)
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 rounded-[26px] border border-violet-100 bg-white/80 px-5 py-5 lg:flex-row lg:items-center lg:justify-between">
-    <div class="space-y-3">
-      <p class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">Arbeitskontext</p>
-      <p class="mt-2 text-sm text-slate-500">Die gewaehlte Season steuert Kategorien, Kandidaten und Review-Queues im gesamten Admin-Bereich.</p>
-      <div class="flex flex-wrap gap-3">
-        <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
+  <div class="flex flex-col gap-3 rounded-lg border border-violet-100 bg-white/80 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
+    <div class="flex flex-wrap items-center gap-2">
+      <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Season</p>
+      <span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-600">
           {{ currentSeason.currentPhase || 'Kein Status' }}
-        </span>
-        <span class="rounded-full border border-violet-100 bg-white px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
+      </span>
+      <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600">
           {{ currentSeason.isCurrent ? 'Public Season' : 'Nicht aktiv' }}
-        </span>
-      </div>
+      </span>
     </div>
 
-    <div class="grid gap-3 lg:min-w-[330px]">
-      <label class="text-sm font-semibold text-slate-600">Season</label>
+    <div class="lg:min-w-[330px]">
       <Select
         v-model="selectedSeasonId"
         :options="seasonOptions"