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

@@ -3,10 +3,8 @@
 	import type { PageData } from './$types.js';
 	import WeeklySurvey from './WeeklySurvey.svelte';
 	import Chatbox from './Chatbox.svelte';
-	import { onMount } from 'svelte';
 
 	let showParticipants = $state(false);
-	let isShortScreen = $state(false);
 
 	let { data }: { data: PageData } = $props();
 	let user = data.user!;
@@ -16,44 +14,22 @@
 	function toggleParticipants() {
 		showParticipants = !showParticipants;
 	}
-
-	onMount(() => {
-		isShortScreen = typeof window !== 'undefined' && window.innerWidth < 1024;
-
-		function handleResize() {
-			const newShortScreen = window.innerWidth < 1024;
-			if (newShortScreen !== isShortScreen) {
-				isShortScreen = newShortScreen;
-				if (!isShortScreen) {
-					showParticipants = true;
-				}
-			}
-		}
-
-		if (typeof window !== 'undefined') {
-			window.addEventListener('resize', handleResize);
-			handleResize();
-
-			return () => {
-				window.removeEventListener('resize', handleResize);
-			};
-		}
-	});
 </script>
 
-<div class="h-full flex lg:flex-row flex-col pt-2 lg:pt-0 bg-gray-50 relative">
-	{#if isShortScreen}
-		<button
-			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"
-			onclick={toggleParticipants}
-		>
-			{$t('utils.words.toggle')}
-		</button>
-	{/if}
+<div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative">
+	<button
+		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>
 
 	<div
-		class="bg-white border rounded-lg shadow-md p-6 mx-4 my-2 h-fit w-full max-w-md text-base lg:text-lg"
-		class:hidden={isShortScreen && !showParticipants}
+		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}
 	>
 		<h2 class="text-xl truncate font-semibold text-gray-700 text-center mb-4">
 			{$t('utils.words.participants')}