Fix #48

frontend/src/lib/components/sessions/writebox.svelte

@@ -56,7 +56,7 @@
 
 <div class="w-full border-t-2">
 	{#if showSpecials}
-		<ul class="flex justify-around divide-x-2 border-b-2 py-1">
+		<ul class="flex justify-around divide-x-2 border-b-2 py-1 flex-wrap md:flex-nowrap">
 			{#each config.SPECIAL_CHARS as char (char)}
 				<button
 					class="border-none"
@@ -106,9 +106,15 @@
 				data-tooltip="tooltip-emoji"
 				role="tooltip"
 				class:hidden={!showPicker}
-				class="absolute z-10 tooltip bottom-0 left-0"
+				class="absolute z-10 tooltip bottom-16 right-0 lg:left-0 lg:right-auto"
 			>
-				<emoji-picker class="light" on:emoji-click={(event) => (message += event.detail.unicode)}>
+				<emoji-picker
+					class="light"
+					on:emoji-click={(event) => {
+						message += event.detail.unicode;
+						textearea.focus();
+					}}
+				>
 				</emoji-picker>
 			</div>
 		</div>

frontend/src/routes/session/+page.svelte

@@ -5,7 +5,6 @@
 	import Session from '$lib/types/session';
 	import { getBaseURL } from '$lib/utils/login';
 	import { onMount } from 'svelte';
-	import { t } from '$lib/services/i18n';
 	import { user } from '$lib/types/user';
 	import { AcademicCap, Icon, Sparkles, User } from 'svelte-hero-icons';
 	export let data;
@@ -30,10 +29,8 @@
 </script>
 
 {#if session}
-	<div class="h-full grid lg:grid-cols-4">
+	<div class="h-full grid lg:grid-cols-7">
 		<div class="justify-evenly h-full p-2">
-			<!-- <p>{$t('session.title')} {session.otherUsersList()}</p> -->
-			<!-- <p>{$t('session.participants')}:</p> -->
 			<ul class="ml-2">
 				{#each session.users as sessionUser (sessionUser.id)}
 					<li
@@ -57,7 +54,7 @@
 				{/each}
 			</ul>
 		</div>
-		<div class="flex flex-row flex-grow col-span-2">
+		<div class="flex flex-row flex-grow col-span-5">
 			<Chatbox {session} token={data.token} />
 		</div>
 		<div class=""></div>