From 3dcc8695b25e8cc1198316addc5d93c412c381f5 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Wed, 11 Sep 2024 12:44:46 -0700
Subject: [PATCH] Improve vertical alignment of lists in chat messages on web
 app

- Make train of thought icons to be top aligned, next to the
  their intermediate step heading
- Add margin bottom to ordered, unordered lists in chat message,
  similar to how it is already added for paragraphs
---
 .../app/components/chatMessage/chatMessage.module.css    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index 17654d5c..e0dd31ac 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -11,6 +11,9 @@ div.chatMessageWrapper {
     padding-bottom: 1rem;
     max-width: 80vw;
 }
+
+div.chatMessageWrapper ol,
+div.chatMessageWrapper ul,
 div.chatMessageWrapper p:not(:last-child) {
     margin-bottom: 16px;
 }
@@ -131,6 +134,12 @@ div.trainOfThought.primary p {
 div.trainOfThoughtElement {
     display: grid;
     grid-template-columns: auto 1fr;
+    align-items: start;
+}
+
+div.trainOfThoughtElement ol,
+div.trainOfThoughtElement ul {
+    margin: auto;
 }
 
 @media screen and (max-width: 768px) {