cleaning up styles

app/page.module.css

@@ -329,6 +329,7 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
   color: #333;
   overflow: hidden; /* Prevents text from overflowing */
+  gap: 20px; /* Space between avatar and text */
 }
 
 .message-content {
@@ -412,14 +413,38 @@
 .avatar {
   display: inline-block;
   vertical-align: middle;
-  width: 40px;
-  height: 40px;
-  
-  
-  margin-right: 10px;
+  flex-shrink: 0; /* Prevents the avatar from shrinking */
 }
 
 @keyframes moveClouds {
   0% { background-position: 0 0; }
   100% { background-position: 1000px 500px; }
+}
+
+.message-content-container {
+  flex: 1;
+  padding-left: 10px; /* Adjust as necessary */
+  overflow: hidden; /* Prevents overflow */
+}
+
+.message-content {
+  word-break: break-word; /* Ensures long words don't cause overflow */
+}
+
+@media (max-width: 768px) {
+  .message-content-container {
+    padding-left: 5px; /* Smaller padding for smaller screens */
+  }
+}
+
+@media (max-width: 768px) {
+  .message-text {
+    margin-right: 5px;
+  }
+}
+
+.message-text {
+  flex-grow: 1;
+  overflow-wrap: break-word;
+  margin-right: 10px; /* Adjust as necessary */
 }

app/page.tsx

@@ -80,16 +80,18 @@ const Page: React.FC = () => {
       bgColor: "bg-white",
       avatarColor: "bg-black",
       dialogComponent: (message: Message) => (
-        <ReactMarkdown
-          className=""
-          components={{
-            a: (props) => (
-              <a {...props} target="_blank" rel="noopener noreferrer" />
-            ),
-          }}
-        >
-          {message.content}
-        </ReactMarkdown>
+        <div className="message-content-container">
+          <ReactMarkdown
+            className=""
+            components={{
+              a: (props) => (
+                <a {...props} target="_blank" rel="noopener noreferrer" />
+              ),
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
+        </div>
       ),
     },
     assistant: {
@@ -97,16 +99,18 @@ const Page: React.FC = () => {
       bgColor: "bg-gray-100",
       avatarColor: "bg-green-500",
       dialogComponent: (message: Message) => (
-        <ReactMarkdown
-          className=""
-          components={{
-            a: (props) => (
-              <a {...props} target="_blank" rel="noopener noreferrer" />
-            ),
-          }}
-        >
-          {message.content}
-        </ReactMarkdown>
+        <div className="message-content-container">
+          <ReactMarkdown
+            className=""
+            components={{
+              a: (props) => (
+                <a {...props} target="_blank" rel="noopener noreferrer" />
+              ),
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
+        </div>
       ),
     },
     function: {
@@ -138,8 +142,7 @@ const Page: React.FC = () => {
                 <div className={styles.avatar}>
                   {roleUIConfig[message.role].avatar}
                 </div>
-                <div style={{ flex: 1 }}>
-                  {message.content === "" && message.function_call != undefined ? (
+                {message.content === "" && message.function_call != undefined ? (
                     typeof message.function_call === "object" ? (
                       <div style={{ display: 'flex', flexDirection: 'column' }}>
                         <div>
@@ -157,9 +160,10 @@ const Page: React.FC = () => {
                       <div className="function-call">{message.function_call}</div>
                     )
                   ) : (
-                    roleUIConfig[message.role].dialogComponent(message)
+                    <div className="message-text">
+                      {roleUIConfig[message.role].dialogComponent(message)}
+                    </div>
                   )}
-                </div>
               </div>
             );
           })