From a0170e9041bd5e7ecb1c68c50278fd669d6d749c Mon Sep 17 00:00:00 2001
From: SouthFox <master@southfox.me>
Date: Tue, 13 Aug 2024 17:13:14 +0800
Subject: [PATCH] [style] improve style

---
 static/index.html | 12 ++++++------
 static/style.css  | 15 ++++++++-------
 2 files changed, 14 insertions(+), 13 deletions(-)
diff --git a/static/index.html b/static/index.html
index 2d06479..400b21e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -10,13 +10,13 @@
 </head>
 
 <body>
-  <div class="container bg-white rounded-lg shadow-md">
-    <h1 class="text-3xl font-bold mb-4 text-center">AAII</h1>
-    <div class="chat" id="chatContainer">
+  <div class="container bg-white rounded-lg shadow-md flex flex-col">
+    <h1 class="flex-none text-3xl font-bold mb-4 text-center">AAII</h1>
+    <div class="chat break-all" id="chatContainer">
     </div>
-    <div class="flex">
-      <textarea type="text" id="userInput" placeholder="Type your message here..." class="outline-none"></textarea>
-      <button class="send-button" id="sendButton" >Send</button>
+    <div class="flex-none flex">
+      <textarea type="text" id="userInput" placeholder="Type your message here..." class="outline-none flex-auto"></textarea>
+      <button class="send-button flex-none" id="sendButton" >Send</button>
     </div>
     <div class="typing-indicator" id="typingIndicator">
     </div>
diff --git a/static/style.css b/static/style.css
index 86150ef..ae124a3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -10,14 +10,16 @@ h1 {
     margin-bottom: 0.5rem;
 }
 
+pre code {
+    display: block;
+    overflow-x: scroll;
+}
+
 body {
 
     display: flex;
     justify-content: center;
     align-items: center;
-    height: calc(100vh - 60px);
-    margin: 0;
-    padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: #f4f4f4;
     margin: 0;
@@ -26,20 +28,19 @@ body {
 }
 
 .container {
-    margin-top: 0;
     width: 90%;
     max-width: 500px;
-    margin: 10px auto 0;
     background-color: #fff;
     border-radius: 12px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
-    padding: 20px;
+    padding: 1rem;
     transition: all 0.3s;
+    height: 100dvh;
 }
 
 .chat {
+    flex-grow: 1;
     overflow-y: auto;
-    height: 400px;
     margin-bottom: 20px;
     border-bottom: 2px solid #e2e2e2;
 }
