From d51011314f00b15132cae970a08793580d53a3e6 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 13 Jul 2024 19:09:25 +0530
Subject: [PATCH] Improve styling of chat input, references UI across screen
 sizes

Use tailwind screen breakpoints shorthand instead of js to apply
different styling for different screen sizes
---
 .../components/chatInputArea/chatInputArea.tsx  |  2 +-
 .../chatMessage/chatMessage.module.css          | 17 +++++++----------
 .../app/components/chatMessage/chatMessage.tsx  |  2 +-
 .../referencePanel/referencePanel.tsx           |  6 +++---
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index f7b36fec..e2b59848 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -287,7 +287,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                 </Button>
                 <div className="grid w-full gap-1.5 relative">
                     <Textarea
-                        className='border-none w-full h-16 min-h-16 py-4 rounded-lg text-lg'
+                        className='border-none w-full h-16 min-h-16 md:py-4 rounded-lg text-lg'
                         placeholder="Type / to see a list of commands"
                         id="message"
                         value={message}
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index de52e4be..e166fc38 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -3,12 +3,13 @@ div.chatMessageContainer {
     flex-direction: column;
     margin: 12px;
     border-radius: 16px;
-    padding: 16px;
+    padding: 8px 16px 0 16px;
     box-shadow: 0 4px 10px var(--box-shadow-color)
 }
 
 div.chatMessageWrapper {
-    padding-left: 24px;
+    padding-left: 1rem;
+    padding-bottom: 1rem;
 }
 div.chatMessageWrapper p:not(:last-child) {
     margin-bottom: 16px;
@@ -20,7 +21,7 @@ div.khojfullHistory {
 }
 
 div.youfullHistory {
-    max-width: 80%;
+    max-width: 100%;
 }
 
 div.chatMessageContainer.youfullHistory {
@@ -71,10 +72,11 @@ div.chatFooter {
 div.chatButtons {
     display: flex;
     justify-content: flex-end;
+    width: min-content;
     border: var(--border-color) 1px solid;
     border-radius: 16px;
     position: relative;
-    bottom: -28px;
+    bottom: -12px;
     background-color: hsla(var(--secondary));
     box-shadow: 0 4px 10px var(--box-shadow-color);
 }
@@ -124,11 +126,6 @@ div.trainOfThought.primary p {
 
 @media screen and (max-width: 768px) {
     div.youfullHistory {
-        max-width: 100%;
+        max-width: 90%;
     }
-
-    div.chatMessageWrapper {
-        padding-left: 8px;
-    }
-
 }
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.tsx b/src/interface/web/app/components/chatMessage/chatMessage.tsx
index 52c3e226..2f617b66 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.tsx
+++ b/src/interface/web/app/components/chatMessage/chatMessage.tsx
@@ -351,7 +351,7 @@ export default function ChatMessage(props: ChatMessageProps) {
                     isHovering &&
                     (
                         <>
-                            <div title={formatDate(props.chatMessage.created)} className={`text-gray-400 relative top-2 left-2`}>
+                            <div title={formatDate(props.chatMessage.created)} className={`text-gray-400 relative top-0 left-4`}>
                                 {renderTimeStamp(props.chatMessage.created)}
                             </div>
                             <div className={styles.chatButtons}>
diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx
index 04fe721e..618d97aa 100644
--- a/src/interface/web/app/components/referencePanel/referencePanel.tsx
+++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx
@@ -276,14 +276,14 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
     }
 
     return (
-        <div className={`${props.isMobileWidth ? 'p-0' : 'p-4'}`}>
+        <div className="pt-0 px-4 pb-4 md:px-6">
             <h3 className="inline-flex items-center">
                 References
                 <p className="text-gray-400 m-2">
                     {numReferences} sources
                 </p>
             </h3>
-            <div className={`flex ${props.isMobileWidth ? 'w-[90vw]' : 'w-auto'} space-x-4 mt-2`}>
+            <div className={`flex sm:w-[90vw] md:w-auto space-x-4 mt-2`}>
                 {
                     notesDataToShow.map((note, index) => {
                         return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} />
@@ -320,7 +320,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
     return (
         <Sheet>
             <SheetTrigger
-                className='text-balance w-[200px] overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle justify-center items-center !m-0 inline-flex'>
+                className='text-balance w-[200px] flex sm:justify-start md:justify-center overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center !m-0 inline-flex'>
                 View references <ArrowRight className='m-1' />
             </SheetTrigger>
             <SheetContent className="overflow-y-scroll">