Fix/121 user list responsiveness

This MR addresses the issue where the user list wasn't responsive on smaller screens (look at the user list within a chat session):

• Toggle button is only displayed on short screen to display the user list
• the user list is now adapted for different screen sizes

Remark: There are other pages/components in the app that are not fully responsive yet.

frontend/src/routes/sessions/[id]/+page.svelte

@@ -4,36 +4,31 @@
 	import WeeklySurvey from './WeeklySurvey.svelte';
 	import Chatbox from './Chatbox.svelte';
 
-	let showParticipants = $state(false);
-
 	let { data }: { data: PageData } = $props();
 	let user = data.user!;
 	let { session, jwt } = data;
 	let { onlineUsers } = session;
-
-	function toggleParticipants() {
-		showParticipants = !showParticipants;
-	}
 </script>
 
 <div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative">
-	<button
+	<input type="checkbox" id="toggleParticipants" class="hidden peer" />
+
+	<label
+		for="toggleParticipants"
 		class="absolute top-4 right-4 bg-yellow-500 text-white px-2 py-1 rounded-md shadow-md
 		hover:bg-yellow-600 transition focus:outline-none text-sm lg:hidden"
-		onclick={toggleParticipants}
 	>
 		{$t('utils.words.toggle')}
-	</button>
+	</label>
 
 	<div
 		class="group w-full max-w-md bg-white border rounded-lg shadow-md p-6 mx-4 my-2 h-fit text-base
-		lg:text-lg transition-all duration-300 ease-in-out
-		hidden lg:block data-[open=true]:block"
-		data-open={showParticipants}
+		lg:text-lg transition-all duration-300 ease-in-out hidden lg:block peer-checked:block"
 	>
 		<h2 class="text-xl truncate font-semibold text-gray-700 text-center mb-4">
 			{$t('utils.words.participants')}
 		</h2>
+
 		<div class="space-y-4">
 			{#each session.users as sessionUser (sessionUser.id)}
 				<div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-100 transition">
@@ -56,6 +51,7 @@
 				</div>
 			{/each}
 		</div>
+
 		<h2 class="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4">
 			{$t('utils.words.topics')}
 		</h2>