chat section changes

Author: Vemarthula-Microsoft

App/frontend-app/src/components/chat/chatRoom.module.scss

@@ -29,6 +29,15 @@
     box-sizing: border-box !important;
 }
 
+/* Force full width for all containers */
+.full-width-container {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    box-sizing: border-box !important;
+}
+
 table {
     border-collapse: collapse;
     width: 100%;
@@ -73,8 +82,30 @@ table {
 .chatMessagesContainer, .questionContainer {
     padding-right: 0.25rem;
     padding-left: 0.25rem;
-    width: 100%;
+    width: 100% !important;
     box-sizing: border-box; /* Include padding in width calculation */
-    max-width: 100%; /* Ensure it doesn't exceed container width */
-    margin: 0;
+    max-width: 100% !important; /* Ensure it doesn't exceed container width */
+    margin: 0 !important;
+}
+
+/* Force Copilot components to take full width */
+.chatMessagesContainer :global(fui-CopilotChat) {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+.chatMessagesContainer :global([role="log"]) {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* Ensure all chat message containers take full width */
+.chatMessagesContainer :global(.fui-CopilotMessage),
+.chatMessagesContainer :global(.fui-UserMessage) {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
 }

App/frontend-app/src/components/chat/chatRoom.tsx

@@ -405,15 +405,15 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
     }, []);
 
     return (
-        <div className="flex w-full flex-1 flex-col items-stretch grey-background">
+        <div className="flex w-full flex-1 flex-col items-stretch grey-background !m-0 !p-0 !max-w-none">
             {isDialogOpen && (
                 <DocDialog
                     metadata={dialogMetadata as Document}
                     isOpen={isDialogOpen}
                     onClose={handleDialogClose}
                     allChunkTexts={allChunkTexts} clearChatFlag={false}                />
             )}
-            <div ref={chatContainerRef} className={`no-scrollbar flex w-full flex-1 flex-col overflow-auto ${styles["chat-container"]}`}>
+            <div ref={chatContainerRef} className={`no-scrollbar flex w-full flex-1 flex-col overflow-auto !max-w-none !m-0 !p-0 ${styles["chat-container"]}`}>
             {!disableOptionsPanel && (
                 <OptionsPanel
                     className={`px-4 mx-0 my-10 flex flex-col items-center justify-center rounded-xl bg-neutral-500 bg-opacity-10 shadow-md outline outline-1 outline-transparent w-full`}
@@ -425,7 +425,7 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
                 />
             )}
             <div ref={optionsBottom}></div>
-                <CopilotProvider className={`${styles.chatMessagesContainer} w-full`}>
+                <CopilotProvider className={`${styles.chatMessagesContainer} w-full !max-w-none`}>
                     <CopilotChat>
                         {conversationAnswers.map(([prompt, response], index) => (
                             <Fragment key={index}>

App/frontend-app/src/pages/chat/chatPage.tsx

@@ -37,8 +37,8 @@ export function ChatPage() {
                     <HeaderBar location={NavLocation.Home} />
                 </div>
             </Header>
-            <main className="grid flex-1 grid-cols-5 gap-x-2 gap-y-8">
-                <div className="col-span-3 col-start-2 flex flex-1 flex-col md:col-span-3 md:col-start-2">
+            <main className="flex flex-1 flex-col w-full">
+                <div className="flex flex-1 flex-col w-full">
                     <HeaderMenuTabs
                         className=""
                         searchResultDocuments={searchResultDocuments}