Fix Chat message appearance: linebreak + background color

Fix for #122 (closed)
Can you confirm that the color of the chat is as expected?

I also had to tweak the position of the pen icon, now that there wasn't an extra line. It's below the message and not on the side of the message anymore, is it ok?

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

@@ -167,14 +167,13 @@
 			class="rounded-full"
 		/>
 	</div>
+	<!-- prettier-ignore -->
 	<div
-		class="chat-bubble whitespace-pre-wrap"
-		class:bg-blue-700={isSender}
+		class="chat-bubble whitespace-pre-wrap text-black"
+		class:bg-blue-200={isSender}
 		class:bg-gray-300={!isSender}
-		class:text-black={!isSender}
-		class:text-white={isSender}
 	>
-		<div contenteditable={isEdit} bind:this={contentDiv} class:bg-blue-900={isEdit}>
+		<div contenteditable={isEdit} bind:this={contentDiv} class:bg-blue-200={isEdit}>
 			{#each parts as part}
 				{#if part.feedback && !isEdit}
 					{#if part.feedback.content}
@@ -199,8 +198,8 @@
 					{@html linkifyHtml(sanitize(part.text), { className: 'underline', target: '_blank' })}
 				{/if}
 			{/each}
-		</div>
-		{#if isEdit}
+		</div><!--
+		-->{#if isEdit}
 			<button
 				class="float-end border rounded-full px-4 py-2 mt-2 bg-white text-blue-700"
 				on:click={() => endEdit()}
@@ -213,10 +212,9 @@
 			>
 				{$t('button.cancel')}
 			</button>
-		{/if}
-		{#if isSender}
+		{/if}{#if isSender}
 			<button
-				class="absolute left-[-1.5rem] mt-2 mr-2 invisible group-hover:visible"
+				class="absolute bottom-2 left-[-1.5rem] invisible group-hover:visible"
 				on:click={() => (isEdit ? endEdit() : startEdit())}
 			>
 				<Icon src={Pencil} class="w-4 h-4 text-gray-800" />