From 260177ed1cbaed7809e21f64cdc4fe6962e7aca0 Mon Sep 17 00:00:00 2001
From: BitterKanegul <15769643+BitterKanegul@users.noreply.github.com>
Date: Sat, 31 Dec 2022 09:06:07 +0530
Subject: [PATCH] Fix float

---
 website/src/components/Messages.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/website/src/components/Messages.tsx b/website/src/components/Messages.tsx
index 51037fbf..90f2ff80 100644
--- a/website/src/components/Messages.tsx
+++ b/website/src/components/Messages.tsx
@@ -10,14 +10,16 @@ const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-s
 export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
-      <FlaggableElement text={text} post_id={post_id}>
-        <div
-          key={i + text}
-          className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
-        >
-          {text}
-        </div>
-      </FlaggableElement>
+      <div className="flex">
+        <FlaggableElement text={text} post_id={post_id}>
+          <div
+            key={i + text}
+            className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
+          >
+            {text}
+          </div>
+        </FlaggableElement>
+      </div>
     );
   });
   // Maybe also show a legend of the colors?