From 6c630bc6c3305983e161219036bc8368f3e0ab66 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Mon, 15 Jul 2024 20:55:44 +0530
Subject: [PATCH] Constrain chat messages to stay in view port across screen
 sizes

- Constrain chat messages max width to view port across screen sizes
- Wrap references on smaller screens, use tailwind, not js to apply styling
---
 .../web/app/components/chatMessage/chatMessage.module.css | 1 +
 .../web/app/components/referencePanel/referencePanel.tsx  | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index e166fc38..51714612 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -10,6 +10,7 @@ div.chatMessageContainer {
 div.chatMessageWrapper {
     padding-left: 1rem;
     padding-bottom: 1rem;
+    max-width: 80vw;
 }
 div.chatMessageWrapper p:not(:last-child) {
     margin-bottom: 16px;
diff --git a/src/interface/web/app/components/referencePanel/referencePanel.tsx b/src/interface/web/app/components/referencePanel/referencePanel.tsx
index 5852854e..17632bea 100644
--- a/src/interface/web/app/components/referencePanel/referencePanel.tsx
+++ b/src/interface/web/app/components/referencePanel/referencePanel.tsx
@@ -283,7 +283,7 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
                     {numReferences} sources
                 </p>
             </h3>
-            <div className={`flex sm:w-[90vw] md:w-auto space-x-4 mt-2`}>
+            <div className={`flex flex-wrap gap-2 w-auto mt-2`}>
                 {
                     notesDataToShow.map((note, index) => {
                         return <NotesContextReferenceCard showFullContent={false} {...note} key={`${note.title}-${index}`} />
@@ -297,7 +297,6 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
                 {
                     shouldShowShowMoreButton &&
                     <ReferencePanel
-                        isMobileWidth={props.isMobileWidth}
                         notesReferenceCardData={props.notesReferenceCardData}
                         onlineReferenceCardData={props.onlineReferenceCardData} />
                 }
@@ -310,7 +309,6 @@ export function TeaserReferencesSection(props: TeaserReferenceSectionProps) {
 interface ReferencePanelDataProps {
     notesReferenceCardData: NotesContextReferenceData[];
     onlineReferenceCardData: OnlineReferenceData[];
-    isMobileWidth: boolean;
 }
 
 export default function ReferencePanel(props: ReferencePanelDataProps) {
@@ -322,7 +320,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
     return (
         <Sheet>
             <SheetTrigger
-                className={`text-balance flex sm:justify-start md:justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center !m-2 inline-flex ${props.isMobileWidth ? 'w-auto' : 'w-[200px]'}`}>
+                className='text-balance w-auto md:w-[200px] justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center !m-2 inline-flex'>
                 View references
                 <ArrowRight className='m-1' />
             </SheetTrigger>
@@ -331,7 +329,7 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
                     <SheetTitle>References</SheetTitle>
                     <SheetDescription>View all references for this response</SheetDescription>
                 </SheetHeader>
-                <div className="flex flex-col w-auto gap-2 mt-2">
+                <div className="flex flex-wrap gap-2 w-auto mt-2">
                     {
                         props.notesReferenceCardData.map((note, index) => {
                             return <NotesContextReferenceCard showFullContent={true} {...note} key={`${note.title}-${index}`} />