N21-1705 class page tabs to wireframe (#3213)

src/pages/administration/ClassOverview.page.vue

@@ -5,18 +5,24 @@
 		:full-width="true"
 		data-testid="admin-class-title"
 	>
-		<v-tabs class="tabs-max-width mb-5" grow v-model="activeTab">
-			<v-tab value="next" data-testid="admin-class-next-year-tab">
-				<span>{{ nextYear }}</span>
-			</v-tab>
-			<v-tab value="current" data-testid="admin-class-current-year-tab">
-				<span>{{ currentYear }}</span>
-			</v-tab>
-			<v-tab value="archive" data-testid="admin-class-previous-years-tab">
-				<span>{{ t("pages.administration.classes.label.archive") }}</span>
-			</v-tab>
-		</v-tabs>
-
+		<template #header>
+			<h1 class="text-h3 pl-2">
+				{{ t("pages.administration.classes.index.title") }}
+			</h1>
+			<div class="mx-n6 mx-md-0 pb-0 d-flex justify-center">
+				<v-tabs class="tabs-max-width" grow v-model="activeTab">
+					<v-tab value="next" data-testid="admin-class-next-year-tab">
+						<span>{{ nextYear }}</span>
+					</v-tab>
+					<v-tab value="current" data-testid="admin-class-current-year-tab">
+						<span>{{ currentYear }}</span>
+					</v-tab>
+					<v-tab value="archive" data-testid="admin-class-previous-years-tab">
+						<span>{{ t("pages.administration.classes.label.archive") }}</span>
+					</v-tab>
+				</v-tabs>
+			</div>
+		</template>
 		<v-data-table-server
 			:headers="headers"
 			:items="classes"
@@ -460,3 +466,9 @@ const getInstituteTitle: ComputedRef<string> = computed(() => {
 	}
 });
 </script>
+
+<style scoped>
+.v-tabs {
+	margin-bottom: -2px;
+}
+</style>