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

@@ -13,29 +13,37 @@
 
 <div class="h-full flex lg:flex-row flex-col pt-2 lg:pt-0">
 	<div
-		class="border rounded-xl p-4 shadow-[0_0_6px_0_rgba(0,14,156,.2)] m-2 my-0 lg:mt-2 h-fit lg:w-96 text-lg space-y-2"
+		class="border rounded-xl p-4 shadow-[0_0_6px_0_rgba(0,14,156,.2)] m-2 h-fit w-full max-w-md text-base lg:text-lg space-y-4"
 	>
-		<h2 class="text-center font-bold">{$t('utils.words.participants')}</h2>
-		<div class="pb-2 space-y-2">
+		<h2 class="truncate text-center font-bold text-lg lg:text-xl mb-2">
+			{$t('utils.words.participants')}
+		</h2>
+		<div class="pb-2 space-y-4">
 			{#each session.users as sessionUser (sessionUser.id)}
-				<div class="flex space-x-2">
-					<div class="rounded-full mx-2 chat-image size-6" title={sessionUser.nickname}>
+				<div class="flex items-center gap-4">
+					<div class="rounded-full mx-2 w-8 h-8 lg:w-10 lg:h-10" title={sessionUser.nickname}>
 						<img
 							src={`https://gravatar.com/avatar/${sessionUser.emailHash}?d=identicon`}
 							alt={sessionUser.nickname}
-							class="rounded-full border-2 text-sm {sessionUser.id == user?.id ||
+							class="rounded-full border-2 {sessionUser.id == user?.id ||
 							$onlineUsers.has(sessionUser.id)
 								? 'border-green-500'
 								: 'border-red-500'}"
 						/>
 					</div>
 
-					<span class:font-bold={sessionUser === user}>{sessionUser.nickname}</span>
+					<span class="truncate w-48 lg:w-64 font-bold={sessionUser === user}">
+						{sessionUser.nickname}
+					</span>
 				</div>
 			{/each}
 		</div>
-		<h2 class="text-center font-bold border-t pt-2">{$t('utils.words.topics')}</h2>
-		<p class="text-center text-sm text-neutral-500 italic">{$t('session.noTopic')}</p>
+		<h2 class="truncate text-center font-bold text-lg lg:text-xl border-t pt-2 mb-2">
+			{$t('utils.words.topics')}
+		</h2>
+		<p class="truncate text-center text-xs lg:text-sm text-neutral-500 italic">
+			{$t('session.noTopic')}
+		</p>
 	</div>
 	<div class="flex flex-row flex-grow col-span-5">
 		<Chatbox {session} {jwt} {user} />