From e85ec462a81a32144f52ea3ff3a7952051d7e11e Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:54:44 +0100
Subject: [PATCH] BC-8357 - add mobile view for participants data table 
 (#3441)

Adds a data-table mobile view for devices <600px for the manage participants table in rooms.

* add mobile view for participants table
* make table header bold for mobile view
---
 .../feature/room/RoomParticipants/ParticipantsTable.vue  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue b/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
index e9c33368fa..e188f7e584 100644
--- a/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
+++ b/src/modules/feature/room/RoomParticipants/ParticipantsTable.vue
@@ -31,6 +31,8 @@
 				t('pages.rooms.participants.participantTable.itemsPerPage')
 			"
 			:no-data-text="t('common.nodata')"
+			:mobile="null"
+			mobile-breakpoint="sm"
 			@update:current-items="onUpdateFilter"
 		>
 			<template #[`item.actions`]="{ item }">
@@ -109,8 +111,13 @@ const tableHeader = [
 </script>
 
 <style lang="scss" scoped>
-:deep .v-data-table-header__content {
+:deep(.v-data-table-header__content) {
 	color: rgba(var(--v-theme-primary-darken-1));
 	font-weight: bold;
 }
+
+/* table header for mobile view */
+:deep(.v-data-table__td-title) {
+	font-weight: bold;
+}
 </style>