implement calculation of positioning

src/modules/data/room/roomMembers/roomMembers.composable.ts

@@ -67,7 +67,9 @@ export const useRoomMembers = (roomId: string) => {
 		try {
 			const result = (
 				await schoolApi.schoolControllerGetTeachers(
-					payload.schoolId ?? ownSchool.id
+					payload.schoolId ?? ownSchool.id,
+					0,
+					100 // TODO: should be not paginated
 				)
 			).data;
 

src/modules/feature/room/RoomMembers/MembersTable.vue

@@ -1,6 +1,8 @@
 <template>
 	<div
+		id="table-title-header"
 		class="d-flex justify-space-between align-center mb-2 table-title-header"
+		:class="{ 'fixed-position': fixedTop }"
 	>
 		<ActionMenu
 			v-if="selectedUserIds.length"
@@ -83,6 +85,9 @@ const props = defineProps({
 		type: Array as PropType<RoomMemberResponse[]>,
 		required: true,
 	},
+	fixedTop: {
+		type: Boolean,
+	},
 });
 
 const emit = defineEmits(["remove:members", "select:members"]);
@@ -182,4 +187,13 @@ const tableHeader = [
 	border-radius: 0.25rem;
 	min-height: 40px;
 }
+
+.fixed-position {
+	position: fixed;
+	top: 0;
+	margin-top: 159px;
+	width: 95vw;
+	z-index: 10;
+	background: rgb(var(--v-theme-white));
+}
 </style>

src/modules/page/room/RoomMembers.page.vue

@@ -3,7 +3,9 @@
 		max-width="full"
 		:breadcrumbs="breadcrumbs"
 		:fab-items="fabAction"
+		:fixed-header="fixedHeader"
 		@fab:clicked="onFabClick"
+		ref="wireframe"
 	>
 		<template #header>
 			<h1 class="text-h3 mb-4" data-testid="room-title">
@@ -28,6 +30,7 @@
 			<MembersTable
 				v-if="!isLoading"
 				:members="memberList"
+				:fixed-top="fixedHeader"
 				@remove:members="onRemoveMembers"
 			/>
 		</div>
@@ -55,7 +58,7 @@ import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import { buildPageTitle } from "@/utils/pageTitle";
 import { useTitle } from "@vueuse/core";
-import { computed, ComputedRef, onMounted, Ref, ref } from "vue";
+import { computed, ComputedRef, onMounted, Ref, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { useRoomDetailsStore, useRoomMembers } from "@data-room";
@@ -64,11 +67,12 @@ import { mdiPlus } from "@icons/material";
 import { MembersTable, AddMembers } from "@feature-room";
 import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
 import { useDisplay } from "vuetify";
+import { useElementBounding } from "@vueuse/core";
 
 const { fetchRoom } = useRoomDetailsStore();
 const { t } = useI18n();
 const route = useRoute();
-const { xs } = useDisplay();
+const { xs, mdAndDown } = useDisplay();
 const { room } = storeToRefs(useRoomDetailsStore());
 const isMembersDialogOpen = ref(false);
 const roomId = route.params.id.toString();
@@ -87,6 +91,9 @@ const memberList: Ref<RoomMemberResponse[]> = ref(roomMembers);
 const pageTitle = computed(() =>
 	buildPageTitle(`${room.value?.name} - ${t("pages.rooms.members.manage")}`)
 );
+const wireframe = ref<HTMLElement | null>(null);
+const fixedHeader = ref(false);
+const { y } = useElementBounding(wireframe);
 
 useTitle(pageTitle);
 
@@ -122,6 +129,10 @@ onMounted(async () => {
 	await fetchMembers();
 });
 
+watch(y, () => {
+	fixedHeader.value = y.value <= -64 && mdAndDown.value;
+});
+
 const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => {
 	if (room === undefined) return [];