From b99ccbc4c384cfc9c6b39ee36e45b47c4d380fd0 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Sat, 23 Aug 2025 01:30:47 -0700
Subject: [PATCH] Improve table styling, fix chat sidebar height on web app

---
 .../chatMessage/chatMessage.module.css        | 34 +++++++++++++++++++
 .../components/chatSidebar/chatSidebar.tsx    |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 947836d1..b30af0ee 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -39,6 +39,40 @@ div.chatMessageWrapper a span {
     border-radius: 4px;
 }
 
+/* Table styling */
+.chatMessageWrapper table {
+    border-collapse: collapse;
+    border: 1px solid hsl(var(--border));
+    margin: 1rem 0;
+    width: 100%;
+}
+
+.chatMessageWrapper table th,
+.chatMessageWrapper table td {
+    border: 1px solid hsl(var(--border));
+    padding: 8px 12px;
+    text-align: left;
+}
+
+.chatMessageWrapper table th {
+    background-color: hsl(var(--muted));
+    font-weight: 600;
+}
+
+/* Alternating row colors for better readability */
+.chatMessageWrapper table tbody tr:nth-child(even) {
+    background-color: hsl(var(--muted) / 0.3);
+}
+
+.chatMessageWrapper table tbody tr:nth-child(odd) {
+    background-color: transparent;
+}
+
+/* Hover effect for table rows */
+.chatMessageWrapper table tbody tr:hover {
+    background-color: hsl(var(--muted) / 0.5);
+}
+
 div.khojfullHistory {
     padding-left: 4px;
 }
diff --git a/src/interface/web/app/components/chatSidebar/chatSidebar.tsx b/src/interface/web/app/components/chatSidebar/chatSidebar.tsx
index 9e0446db..7153f5ba 100644
--- a/src/interface/web/app/components/chatSidebar/chatSidebar.tsx
+++ b/src/interface/web/app/components/chatSidebar/chatSidebar.tsx
@@ -88,7 +88,7 @@ export function ChatSidebar({ ...props }: ChatSideBarProps) {
     }
 
     return (
-        <div className="relative">
+        <div className="relative h-full">
             <ChatSidebarInternal {...props} />
         </div>
     );