diff --git a/exo/tinychat/index.css b/exo/tinychat/index.css
index 47c5e4be..d94a5a23 100644
--- a/exo/tinychat/index.css
+++ b/exo/tinychat/index.css
@@ -139,6 +139,14 @@ main {
   padding: 0.5rem 1rem;
   border-radius: 20px;
 }
+
+@media(max-width: 1482px) {
+  .messages {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+
 .message-role-assistant {
   background-color: var(--secondary-color);
   margin-right: auto;
@@ -149,6 +157,12 @@ main {
   background-color: var(--primary-color);
   color: #000;
 }
+
+.message-role-user p {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
 .download-progress {
   position: fixed;
   bottom: 11rem;
diff --git a/exo/tinychat/index.html b/exo/tinychat/index.html
index ecc7a973..b7025a34 100644
--- a/exo/tinychat/index.html
+++ b/exo/tinychat/index.html
@@ -193,7 +193,7 @@
             otx = $event.changedTouches[0].clientX;
           " class="history" x-data="{ otx: 0, trigger: 75 }">
 <h3 x-text="new Date(_state.time).toLocaleString()"></h3>
-<p x-text="$truncate(_state.messages[0].content, 80)"></p>
+<p x-text="$truncate(_state.messages[0].content, 76)"></p>
 <!-- delete button -->
 <button @click.stop="removeHistory(_state);" class="history-delete-button">
 <i class="fas fa-trash"></i>