Fix float

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?