fix: Citation and Chat History panel independence (AB#43310)

Author: Avijit-Microsoft

src/App/src/App.css

@@ -13,6 +13,7 @@
   height: calc(100vh - var(--header-height));
   gap: var(--gap-base);
   margin-inline: var(--margin-base);
+  overflow: hidden;
 }
 
 .main-container > div {
@@ -51,21 +52,17 @@ body {
   font-weight: 400;
 }
 
-.citation-overlay {
-  position: fixed;
-  top: var(--header-height);
-  right: 0;
-  width: 20%;
-  min-width: 280px;
+.citation-panel-wrapper {
+  flex: 0 1 20%;
+  min-width: 200px;
   max-width: 400px;
-  height: calc(100vh - var(--header-height));
-  z-index: 100;
-  pointer-events: none;
-  box-sizing: border-box;
+  margin-block: var(--margin-base);
+  overflow: hidden;
 }
 
-.citation-overlay > * {
-  pointer-events: auto;
+.citation-panel-wrapper .citationPanel {
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .left-section {

src/App/src/App.tsx

@@ -166,10 +166,14 @@ const Dashboard: React.FC = () => {
         nextState[panels.CHAT] = true;
       }
 
+      if (panelName === panels.CHAT && !nextState[panels.CHAT]) {
+        dispatch(hideCitation());
+      }
+
       updateLayoutWidths(nextState);
       setPanelShowStates(nextState);
     },
-    [panelShowStates, updateLayoutWidths]
+    [dispatch, panelShowStates, updateLayoutWidths]
   );
 
   const getHistoryListData = useCallback(async () => {
@@ -302,6 +306,11 @@ const Dashboard: React.FC = () => {
             />
           </div>
         )}
+        {showCitation && currentConversationIdForCitation !== "" && (
+          <div className="citation-panel-wrapper">
+            <CitationPanel activeCitation={activeCitation} />
+          </div>
+        )}
         {panelShowStates[panels.CHAT] &&
           panelShowStates[panels.CHATHISTORY] && (
             <div
@@ -322,11 +331,6 @@ const Dashboard: React.FC = () => {
             </div>
           )}
       </div>
-      {showCitation && currentConversationIdForCitation !== "" && (
-        <section className="citation-overlay" aria-label="Citation panel">
-          <CitationPanel activeCitation={activeCitation} />
-        </section>
-      )}
     </FluentProvider>
   );
 };