Filter section Auto cehck changes and chat section white space cover All Ui Changes only

Author: Vemarthula-Microsoft

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

@@ -36,6 +36,22 @@
     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;

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/pages/chat/chatPage.tsx

@@ -31,14 +31,35 @@ export function ChatPage() {
     };
 
     return (
-        <div className="flex w-full flex-1 flex-col bg-neutral-100" style={{ width: '100vw', maxWidth: '100vw', margin: 0, padding: 0 }}>
+        <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="flex flex-1 flex-col w-full" style={{ width: '100%', maxWidth: '100%' }}>
-                <div className="flex flex-1 flex-col w-full" style={{ width: '100%', maxWidth: '100%' }}>
+            <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,19 +38,22 @@
     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 */
@@ -66,6 +69,7 @@
     width: 50px !important;
     min-width: 50px;
     transition: width 0.3s ease-in-out;
+    flex-shrink: 0; /* Prevent shrinking */
   }
 }
 
@@ -75,6 +79,7 @@
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
+  width: 100%; /* Ensure full width */
 }
 
 .resizable-panel {
@@ -84,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;

App/frontend-app/src/pages/home/home.tsx

@@ -242,7 +242,23 @@ export function Home({ isSearchResultsPage }: HomeProps) {
     }
 
     function toggleFilterPanel(): void {
+        const wasCollapsed = isFilterPanelCollapsed;
         setIsFilterPanelCollapsed(!isFilterPanelCollapsed);
+        
+        if (wasCollapsed) {
+            // Expanding: Reduce documents and chat widths to make room for filter panel
+            // Filter panel takes ~15%, so documents and chat should take ~85% total
+            setDocumentsWidth(34); // 34% of total width
+            setChatWidth(51);      // 51% of total width
+        } else {
+            // Collapsing: Expand documents and chat to fill the space
+            // Distribute the extra ~15% proportionally
+            const currentTotal = documentsWidth + chatWidth;
+            const expansionFactor = 100 / currentTotal; // Scale to fill 100%
+            
+            setDocumentsWidth(Math.round(documentsWidth * expansionFactor));
+            setChatWidth(Math.round(chatWidth * expansionFactor));
+        }
     }
 
     const handlePanelResize = (leftWidth: number, rightWidth: number) => {
@@ -539,10 +555,10 @@ export function Home({ isSearchResultsPage }: HomeProps) {
             </Header>
 
 <main className="w-full h-full flex flex-col">
-    <div className="flex flex-col md:flex-row flex-grow">
+    <div className={`flex flex-col md:flex-row flex-grow ${homeStyles["panels-container"]}`}>
         {/* Left Section: Filter Panel with Toggle */}
         {!isFilterPanelCollapsed && (
-            <div className={`flex flex-col w-full bg-white shadow-md p-4 ${homeStyles["no-bottom-padding"]} ${homeStyles["filters-panel"]} transition-all duration-300`}>
+            <div className={`flex flex-col bg-white shadow-md p-4 ${homeStyles["no-bottom-padding"]} ${homeStyles["filters-panel"]} transition-all duration-300`}>
                 {/* Filter Header with Toggle Button */}
                 <div className="mb-4 flex items-center justify-between">
                     <FilterButton onFilterPress={onFilterPress} />
@@ -568,7 +584,7 @@ export function Home({ isSearchResultsPage }: HomeProps) {
 
         {/* Collapsed Filter Toggle Button */}
         {isFilterPanelCollapsed && (
-            <div className="flex flex-col bg-white shadow-md p-2 min-w-[50px] items-center">
+            <div className={`flex flex-col bg-white shadow-md p-2 ${homeStyles["filters-panel-collapsed"]} items-center transition-all duration-300`}>
                 <Button 
                     appearance="subtle" 
                     icon={<ChevronRight24Regular />}