From 72b66dd3d8811f8ba3440b74affc0919c118c3d7 Mon Sep 17 00:00:00 2001
From: Yiorgis Gozadinos <ggozadinos@gmail.com>
Date: Thu, 8 Jan 2026 12:33:55 +0200
Subject: [PATCH] Styling

---
 app/frontend/app/globals.css       | 113 +++++++++++++++++++++++++++++
 app/frontend/components/Chat.tsx   |   6 +-
 app/frontend/components/DbInfo.tsx |   2 +-
 3 files changed, 117 insertions(+), 4 deletions(-)

diff --git a/app/frontend/app/globals.css b/app/frontend/app/globals.css
index 8a9205a3..bdf9491e 100644
--- a/app/frontend/app/globals.css
+++ b/app/frontend/app/globals.css
@@ -22,3 +22,116 @@ a {
 	color: inherit;
 	text-decoration: none;
 }
+
+/* CopilotKit markdown styling */
+.copilotKitAssistantMessage {
+	line-height: 1.6;
+}
+
+.copilotKitAssistantMessage h1,
+.copilotKitAssistantMessage h2,
+.copilotKitAssistantMessage h3,
+.copilotKitAssistantMessage h4 {
+	margin-top: 1.25em;
+	margin-bottom: 0.5em;
+	font-weight: 600;
+	line-height: 1.3;
+}
+
+.copilotKitAssistantMessage h1 {
+	font-size: 1.5em;
+}
+
+.copilotKitAssistantMessage h2 {
+	font-size: 1.3em;
+}
+
+.copilotKitAssistantMessage h3 {
+	font-size: 1.15em;
+}
+
+.copilotKitAssistantMessage p {
+	margin-bottom: 0.75em;
+}
+
+.copilotKitAssistantMessage ul,
+.copilotKitAssistantMessage ol {
+	margin: 0.75em 0;
+	padding-left: 1.5em;
+}
+
+.copilotKitAssistantMessage li {
+	margin-bottom: 0.35em;
+}
+
+.copilotKitAssistantMessage code {
+	background: #f1f5f9;
+	padding: 0.15em 0.4em;
+	border-radius: 4px;
+	font-size: 0.9em;
+	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.copilotKitAssistantMessage pre {
+	background: #1e293b;
+	color: #e2e8f0;
+	padding: 1em;
+	border-radius: 8px;
+	overflow-x: auto;
+	margin: 1em 0;
+}
+
+.copilotKitAssistantMessage pre code {
+	background: transparent;
+	padding: 0;
+	color: inherit;
+}
+
+.copilotKitAssistantMessage blockquote {
+	border-left: 3px solid #3b82f6;
+	padding-left: 1em;
+	margin: 1em 0;
+	color: #64748b;
+	font-style: italic;
+}
+
+.copilotKitAssistantMessage a {
+	color: #3b82f6;
+	text-decoration: underline;
+}
+
+.copilotKitAssistantMessage a:hover {
+	color: #2563eb;
+}
+
+.copilotKitAssistantMessage hr {
+	border: none;
+	border-top: 1px solid #e2e8f0;
+	margin: 1.5em 0;
+}
+
+.copilotKitAssistantMessage table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 1em 0;
+}
+
+.copilotKitAssistantMessage th,
+.copilotKitAssistantMessage td {
+	border: 1px solid #e2e8f0;
+	padding: 0.5em 0.75em;
+	text-align: left;
+}
+
+.copilotKitAssistantMessage th {
+	background: #f8fafc;
+	font-weight: 600;
+}
+
+.copilotKitAssistantMessage strong {
+	font-weight: 600;
+}
+
+.copilotKitAssistantMessage em {
+	font-style: italic;
+}
diff --git a/app/frontend/components/Chat.tsx b/app/frontend/components/Chat.tsx
index 2b3d37c7..3a2f3494 100644
--- a/app/frontend/components/Chat.tsx
+++ b/app/frontend/components/Chat.tsx
@@ -64,8 +64,8 @@ function ChatContent() {
 					padding: 1rem;
 				}
 				.chat-container {
-					width: 100%;
-					max-width: 800px;
+					width: calc(100% - 2rem);
+					max-width: 1400px;
 					height: 90vh;
 					border-radius: 12px;
 					overflow: hidden;
@@ -87,7 +87,6 @@ function ChatContent() {
 			`}</style>
 			<div className="chat-wrapper">
 				<div className="chat-container">
-					<DbInfo />
 					<div className="chat-content">
 						<CopilotChat
 							labels={{
@@ -97,6 +96,7 @@ function ChatContent() {
 							}}
 						/>
 					</div>
+					<DbInfo />
 				</div>
 			</div>
 		</>
diff --git a/app/frontend/components/DbInfo.tsx b/app/frontend/components/DbInfo.tsx
index eb19c132..dc33193b 100644
--- a/app/frontend/components/DbInfo.tsx
+++ b/app/frontend/components/DbInfo.tsx
@@ -66,7 +66,7 @@ export default function DbInfo() {
 					font-size: 0.75rem;
 					color: #64748b;
 					background: #f8fafc;
-					border-bottom: 1px solid #e2e8f0;
+					border-top: 1px solid #e2e8f0;
 					justify-content: center;
 				}
 				.db-info-error {