From b326c0c6f2c8d392b223ac15f066ef2a5b235695 Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Fri, 13 Jun 2025 00:56:22 +0200
Subject: [PATCH] Chat Client changes:

- maximum width for input and message history
- ensure good display for sidebar explanation
---
 .../static/css/chat-components.css            | 39 +++++++++++++++++++
 eveai_chat_client/templates/base.html         | 19 +++++++++
 2 files changed, 58 insertions(+)

diff --git a/eveai_chat_client/static/css/chat-components.css b/eveai_chat_client/static/css/chat-components.css
index cbe8c82..7f0df41 100644
--- a/eveai_chat_client/static/css/chat-components.css
+++ b/eveai_chat_client/static/css/chat-components.css
@@ -10,6 +10,17 @@
     box-sizing: border-box;
 }
 
+/* Gemeenschappelijke container voor consistente breedte */
+.chat-component-container {
+    width: 100%;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1; /* Neemt beschikbare verticale ruimte in */
+}
+
 /* Message Area - neemt alle beschikbare ruimte */
 .chat-messages-area {
     flex: 1; /* Neemt alle beschikbare ruimte */
@@ -23,6 +34,11 @@
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255,255,255,0.2);
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    width: 100%;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto; /* Horizontaal centreren */
+    align-self: center; /* Extra centrering in flexbox context */
 }
 
 /* Chat Input - altijd onderaan */
@@ -34,6 +50,11 @@
     border: 1px solid rgba(255,255,255,0.2);
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
     z-index: 10;
+    width: 100%;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto; /* Horizontaal centreren */
+    align-self: center; /* Extra centrering in flexbox context */
 }
 
 /* Zorg dat de MessageHistory container ook flexbox gebruikt */
@@ -44,6 +65,10 @@
     min-height: 0;
     padding: 20px; /* Interne padding voor MessageHistory */
     box-sizing: border-box;
+    width: 100%;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto; /* Horizontaal centreren */
 }
 
 .chat-messages {
@@ -60,6 +85,9 @@
     position: relative;
     padding: 20px; /* Interne padding voor ChatInput */
     box-sizing: border-box;
+    max-width: 1000px; /* Optimale breedte */
+    margin-left: auto;
+    margin-right: auto; /* Horizontaal centreren */
 }
 
 .chat-input {
@@ -175,14 +203,21 @@
 
     .chat-messages-area {
         margin-bottom: 15px;
+        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
+    }
+
+    .chat-input-area {
+        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
     }
 
     .message-history-container {
         padding: 15px;
+        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
     }
 
     .chat-input-container {
         padding: 15px;
+        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
     }
 
     .chat-input {
@@ -201,6 +236,10 @@
         padding: 10px 15px;
         min-height: 40px;
     }
+
+    .chat-component-container {
+        max-width: 100%; /* Op mobiel volledige breedte gebruiken */
+    }
 }
 
 /* Extra small screens */
diff --git a/eveai_chat_client/templates/base.html b/eveai_chat_client/templates/base.html
index 003cbbd..2a4110c 100644
--- a/eveai_chat_client/templates/base.html
+++ b/eveai_chat_client/templates/base.html
@@ -89,6 +89,25 @@
             text-decoration: underline;
         }
 
+        /* Style lists in markdown content */
+        .sidebar-explanation ul,
+        .sidebar-explanation ol {
+            padding-left: 20px;
+            margin: 10px 0;
+        }
+
+        .sidebar-explanation li {
+            margin-bottom: 5px;
+        }
+
+        .sidebar-explanation ul li {
+            list-style-type: disc;
+        }
+
+        .sidebar-explanation ol li {
+            list-style-type: decimal;
+        }
+
         .content-area {
             flex: 1;
             background: linear-gradient(135deg, var(--gradient-start-color), var(--gradient-end-color));