feat: Ui Enhancements introduce one new Ui change, Filter section option expands if checked any option

App/frontend-app/src/assets/icons/azureIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function AzureIcon({ className }: { className?: string }): JSX.Element {
+export function AzureIcon({ className }: { className?: string }): React.JSX.Element {
     return (
         <svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path

App/frontend-app/src/assets/icons/gitHubLogoIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function GitHubIcon({ className }: { className?: string }): JSX.Element {
+export function GitHubIcon({ className }: { className?: string }): React.JSX.Element {
     return (
         <svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="M12 .3a11.97 11.97 0 0 1 6.05 1.63c.88.53 1.69 1.16 2.42 1.88.74.72 1.37 1.53 1.89 2.42a12.08 12.08 0 0 1-.62 13.08c-.73 1-1.6 1.88-2.6 2.63a11.8 11.8 0 0 1-3.45 1.76h-.1a.6.6 0 0 1-.45-.16.59.59 0 0 1-.16-.43v-3.29c0-.4-.05-.8-.17-1.21-.11-.4-.33-.75-.63-1.02.9-.1 1.7-.29 2.38-.55a4.6 4.6 0 0 0 2.74-2.88 8.2 8.2 0 0 0 .35-2.49 4.85 4.85 0 0 0-1.23-3.22 3.37 3.37 0 0 0 .25-1.38 4.37 4.37 0 0 0-.37-1.8.34.34 0 0 0-.12-.02h-.13c-.25 0-.51.04-.79.12-.27.08-.54.18-.8.3A10.73 10.73 0 0 0 15 6.5a11.07 11.07 0 0 0-6 0 12.97 12.97 0 0 0-1.44-.82 7.35 7.35 0 0 0-.82-.3 2.7 2.7 0 0 0-.79-.13h-.13c-.04 0-.09 0-.12.02a5.94 5.94 0 0 0-.37 1.8 4.27 4.27 0 0 0 .25 1.38 4.6 4.6 0 0 0-1.23 3.22c0 .95.11 1.78.34 2.47a4.56 4.56 0 0 0 2.74 2.9c.68.28 1.47.47 2.38.56a2 2 0 0 0-.52.73c-.11.28-.2.57-.24.88a3.22 3.22 0 0 1-1.37.31c-.5 0-.92-.11-1.25-.35a3.4 3.4 0 0 1-.88-.96 3.38 3.38 0 0 0-.77-.84 2.13 2.13 0 0 0-.5-.28c-.18-.07-.37-.11-.57-.12h-.14a.44.44 0 0 0-.17.03l-.17.07c-.05.03-.07.07-.07.12 0 .1.06.18.17.27l.27.21.03.03a6.17 6.17 0 0 1 .8.76c.1.14.2.29.27.44l.27.55c.26.61.64 1.05 1.11 1.33a3.5 3.5 0 0 0 1.72.42 5.32 5.32 0 0 0 1.22-.14v2.04a.6.6 0 0 1-.16.44c-.11.11-.26.17-.46.17h-.1a11.55 11.55 0 0 1-6.05-4.38A12.17 12.17 0 0 1 .43 9.1c.28-1.03.69-1.98 1.22-2.86.53-.89 1.16-1.7 1.88-2.43.71-.73 1.52-1.36 2.42-1.89A12.08 12.08 0 0 1 12 .3z" />

App/frontend-app/src/assets/icons/mailIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function MailIcon({ className }: { className?: string }): JSX.Element {
+export function MailIcon({ className }: { className?: string }): React.JSX.Element {
     return (
         <svg className={className} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path d="M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z" />

App/frontend-app/src/components/chat/OptionsPanel.css

@@ -1,6 +1,10 @@
 .options-panel-container {
     padding-bottom: 20px; /* Add more padding below the toggle */
     margin-top: 2px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .options-panel-container.sticky {
@@ -25,7 +29,8 @@
     position: relative;
     background-color: #ffffff;
     border-radius: 9999px;
-    width: 300px;
+    width: 100%;
+    max-width: 320px;
     height: 40px;
     display: flex;
     align-items: center;

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

@@ -21,6 +21,54 @@
     }
 }
 
+/* Global overrides to ensure full width */
+:global(html), :global(body), :global(#root) {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    box-sizing: border-box !important;
+}
+
+/* Override home page chat-panel constraints on chat page */
+:global(.chat-panel) {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+
+/* Debug: Force full width for ALL elements on chat page */
+:global([data-testid="chat-page"]) * {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+}
+
+/* Debug: Override any grid or flex constraints */
+:global(div) {
+    max-width: none !important;
+}
+
+/* Debug: Force full viewport width */
+:global(body) {
+    overflow-x: hidden !important;
+}
+
+/* Ensure no white space in chat area */
+.no-white-space {
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100% !important;
+    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%;
@@ -40,19 +88,55 @@ table {
 
 .grey-background {
     background-color: #f0f0f03d;
+    width: 100%;
+    overflow-x: hidden; /* Prevent horizontal overflow */
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 
 .attachment-tag-container {
     display: flex;
     flex-wrap: wrap;
+    width: 100%;
 }
 
 .chat-container {
     max-block-size: 75vh;
+    width: 100%;
+    overflow-x: hidden; /* Prevent horizontal overflow */
+    margin: 0;
+    padding: 0;
 }
 
 .chatMessagesContainer, .questionContainer {
-    padding-right: 1rem;
-    padding-left: 1rem;
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+    width: 100% !important;
+    box-sizing: border-box; /* Include padding in width calculation */
+    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

@@ -186,7 +186,6 @@ export function ChatRoom({ searchResultDocuments, selectedDocuments, chatWithDoc
 
 
 
-
         let filterByDocumentIds: string[] = [];
 
 

App/frontend-app/src/components/documentViewer/documentViewer.tsx

@@ -66,8 +66,7 @@ interface Cell {
 }
 
 export function DocDialog(
-    { metadata, isOpen, allChunkTexts, clearChatFlag, onClose }: DocDialogProps,
-    props: Partial<TabListProps>
+    { metadata, isOpen, allChunkTexts, clearChatFlag, onClose, ...props }: DocDialogProps & Partial<TabListProps>
 ) {
     const {t} = useTranslation();
     const styles = useStyles();

App/frontend-app/src/components/filter/filter.tsx

@@ -65,6 +65,7 @@ export function Filter({
     };
 
     const [selectedKeywords, setSelectedKeywords] = useState<{ [key: string]: string[] }>(getInitialSelectedKeywords);
+    const [openItems, setOpenItems] = useState<string[]>([]);
     const isInitialMount = useRef(true);
 
     useEffect(() => {
@@ -84,11 +85,28 @@ export function Filter({
     useEffect(() => {
         if (clearFilters) {
             setSelectedKeywords({});
+            setOpenItems([]); // Close all accordion items when clearing filters
             localStorage.removeItem(localStorageKey);
             onFilterCleared(); // Notify parent that filters have been cleared
         }
     }, [clearFilters, onFilterCleared]);
 
+    // Effect to automatically expand/collapse accordion items based on selections
+    useEffect(() => {
+        if (!keywordFilterInfo) return;
+
+        const categoriesWithSelections: string[] = [];
+
+        Object.entries(keywordFilterInfo).forEach(([category], index) => {
+            // Check if this category has any selected keywords
+            if (selectedKeywords[category] && selectedKeywords[category].length > 0) {
+                categoriesWithSelections.push(index.toString());
+            }
+        });
+
+        setOpenItems(categoriesWithSelections);
+    }, [selectedKeywords, keywordFilterInfo]);
+
     const handleCheckboxChange = (checked: boolean, category: string, keyword: string) => {
         setSelectedKeywords((prevKeywords) => {
             const newKeywords = { ...prevKeywords };
@@ -113,10 +131,19 @@ export function Filter({
         });
     };
 
+    const handleAccordionToggle = (_event: any, data: { openItems: string[] }) => {
+        setOpenItems(data.openItems);
+    };
+
     return (
         <div className={`${className || ""} flex flex-col`}>
             <div className={classes.accordionWrapper}>
-                <Accordion multiple collapsible>
+                <Accordion 
+                    multiple 
+                    collapsible 
+                    openItems={openItems}
+                    onToggle={handleAccordionToggle}
+                >
                     {keywordFilterInfo && Object.entries(keywordFilterInfo).slice(0,10).map(([category, keywords], index) => (
                         <AccordionItem key={index} value={index.toString()}>
                             <AccordionHeader inline>{category}</AccordionHeader>

App/frontend-app/src/components/headerMenu/HeaderMenuTabs.tsx

@@ -118,7 +118,7 @@ export function HeaderMenuTabs({
                                                         icon={<Dismiss24Regular />}
                                                         iconPosition="after"
                                                         appearance="subtle"
-                                                        onClick={(e) => {
+                                                        onClick={(e: React.MouseEvent) => {
                                                             e.stopPropagation();
                                                             updateSelectedDocuments(document);
                                                         }}

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

@@ -31,14 +31,35 @@ export function ChatPage() {
     };
 
     return (
-        <div className="flex w-full flex-1 flex-col bg-neutral-100">
+        <div 
+            data-testid="chat-page"
+            className="flex w-full flex-1 flex-col bg-neutral-100" 
+            style={{ 
+                width: '100vw', 
+                maxWidth: '100vw', 
+                margin: 0, 
+                padding: 0,
+                backgroundColor: 'red', // Debug: should show red background
+                border: '2px solid blue' // Debug: blue border to see container boundaries
+            }}
+        >
             <Header className="flex flex-col justify-between bg-contain bg-right-bottom bg-no-repeat" size="small">
                 <div className="-ml-8">
                     <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" style={{ 
+                width: '100%', 
+                maxWidth: '100%',
+                backgroundColor: 'yellow', // Debug: should show yellow background
+                border: '2px solid green' // Debug: green border to see main boundaries
+            }}>
+                <div className="flex flex-1 flex-col w-full" style={{ 
+                    width: '100%', 
+                    maxWidth: '100%',
+                    backgroundColor: 'lightblue', // Debug: should show light blue background
+                    border: '2px solid purple' // Debug: purple border to see inner div boundaries
+                }}>
                     <HeaderMenuTabs
                         className=""
                         searchResultDocuments={searchResultDocuments}
@@ -47,10 +68,17 @@ export function ChatPage() {
                         updateSelectedDocuments={updateSelectedDocuments}
                     />
                     <div className="absolute left-0 right-0 mt-11 w-full border-b border-b-neutral-300"></div>
-                    <ChatRoom
-                        searchResultDocuments={searchResultDocuments}
-                        selectedDocuments={selectedDocuments}
-                        chatWithDocument={chatWithSingleSelectedDocument ? chatWithSingleSelectedDocument : []} clearChatFlag={false}                    />
+                    <div style={{ 
+                        width: '100%', 
+                        maxWidth: '100%',
+                        backgroundColor: 'orange', // Debug: should show orange background
+                        border: '2px solid red' // Debug: red border around ChatRoom
+                    }}>
+                        <ChatRoom
+                            searchResultDocuments={searchResultDocuments}
+                            selectedDocuments={selectedDocuments}
+                            chatWithDocument={chatWithSingleSelectedDocument ? chatWithSingleSelectedDocument : []} clearChatFlag={false}                        />
+                    </div>
                 </div>
             </main>
         </div>

App/frontend-app/src/pages/home/home.module.scss

@@ -38,24 +38,38 @@
     width: 15% !important;
     min-width: 229px;
     transition: width 0.3s ease-in-out;
+    flex-shrink: 0; /* Prevent shrinking */
   }
 
   .documents-panel {
     width: 34% !important;
-    min-width: 410px;
+    min-width: 300px; /* Reduced from 410px for better responsiveness */
     transition: width 0.3s ease-in-out;
+    flex-grow: 1; /* Allow growing to fill space */
   }
 
   .chat-panel {
-    width: 51% !important;
+    width: 51%;
     min-width: 300px;
     transition: width 0.3s ease-in-out;
+    overflow: hidden; /* Prevent content from spilling out */
+    flex-grow: 1; /* Allow growing to fill space */
+  }
+
+  /* Full width override for chat page */
+  .chat-panel-fullwidth {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 300px;
+    transition: width 0.3s ease-in-out;
+    overflow: hidden;
   }
 
   .filters-panel-collapsed {
     width: 50px !important;
     min-width: 50px;
     transition: width 0.3s ease-in-out;
+    flex-shrink: 0; /* Prevent shrinking */
   }
 }
 
@@ -65,6 +79,7 @@
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
+  width: 100%; /* Ensure full width */
 }
 
 .resizable-panel {
@@ -74,6 +89,15 @@
   overflow: hidden;
 }
 
+/* Main container for panels to prevent white space */
+.panels-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 /* Filter panel transitions */
 .filter-panel-enter {
   opacity: 0;