From 2bc74e8e317c5d8b686eb5a9c996ce3c54c1d081 Mon Sep 17 00:00:00 2001
From: Kinvert <keith@kinvert.com>
Date: Wed, 25 Jan 2023 19:06:18 -0500
Subject: [PATCH] Align Chat Bubbles Right and Left

---
 templates/index.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/templates/index.html b/templates/index.html
index b53ad9d..4f07d50 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,6 +12,8 @@
                 padding: 10px;
                 margin: 20px;
                 border-radius: 10px;
+                float: left;
+                width: calc(100% / 12 * 8);
             }
 
             /* Style for odd-indexed messages */
@@ -20,6 +22,8 @@
                 padding: 10px;
                 margin: 20px;
                 border-radius: 10px;
+                float: right;
+                width: calc(100% / 12 * 8);
             }
 
             button#reset-button {
@@ -34,7 +38,7 @@ <h1>ChatGPT @ Home</h1>
         {% if history %}
         <!-- Chat history -->
         <div id="history" class="card">
-            <div class="card-content">
+            <div class="card-content" style="overflow: auto">
                 {% for message in history[1:] %} 
                     <div class="card {% if loop.index % 2 == 0 %}even{% else %}odd{% endif %}">
                         <p>{{ message }}</p>