Merge branch 'fix/121-user-list-responsiveness' into 'dev'

Fix/121 user list responsiveness

See merge request !31

frontend/src/lang/en.json

@@ -144,7 +144,8 @@
 			"participants": "Participants",
 			"programed": "Scheduled",
 			"status": "Status",
-			"topics": "Topics"
+			"topics": "Topics",
+			"toggle": "Participants"
 		}
 	},
 	"button": {

frontend/src/lang/fr.json

@@ -432,7 +432,8 @@
 			"title": "Titre",
 			"users": "Utilisateurs",
 			"description": "Description",
-			"email": "E-mail"
+			"email": "E-mail",
+			"toggle": "Participants"
 		}
 	},
 	"inputs": {

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

@@ -6,37 +6,60 @@
 
 	let { data }: { data: PageData } = $props();
 	let user = data.user!;
-
 	let { session, jwt } = data;
 	let { onlineUsers } = session;
 </script>
 
-<div class="h-full flex lg:flex-row flex-col pt-2 lg:pt-0">
+<div class="h-full flex flex-col lg:flex-row pt-2 lg:pt-0 bg-gray-50 relative">
+	<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"
+	>
+		{$t('utils.words.toggle')}
+	</label>
+
 	<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="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 peer-checked:block"
 	>
-		<h2 class="text-center font-bold">{$t('utils.words.participants')}</h2>
-		<div class="pb-2 space-y-2">
+		<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 space-x-2">
-					<div class="rounded-full mx-2 chat-image size-6" title={sessionUser.nickname}>
+				<div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-100 transition">
+					<div
+						class="w-10 h-10 rounded-full overflow-hidden shadow-md"
+						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-medium text-gray-800">
+						{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="text-lg truncate font-semibold text-gray-700 text-center border-t pt-4 mt-4">
+			{$t('utils.words.topics')}
+		</h2>
+		<p class="text-center truncate 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} />
 	</div>