From 6bc53a239379aef1e284640441d4eff68e54af6c Mon Sep 17 00:00:00 2001
From: Yamini-Microsoft <v-yamini3@microsoft.com>
Date: Fri, 15 May 2026 02:42:15 +0530
Subject: [PATCH 1/2] fix: citation panel height mismatch with chat panels

- Use flex-based citation-panel-wrapper for consistent height alignment
- Add box-sizing: border-box to include padding/border in height calc
- Prevent horizontal overflow on main-container

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/App/src/App.css | 21 +++++++++------------
 src/App/src/App.tsx | 10 +++++-----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/App/src/App.css b/src/App/src/App.css
index 7b8b7330b..265e41393 100644
--- a/src/App/src/App.css
+++ b/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 {
diff --git a/src/App/src/App.tsx b/src/App/src/App.tsx
index cbe409b03..780d97e71 100644
--- a/src/App/src/App.tsx
+++ b/src/App/src/App.tsx
@@ -302,6 +302,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 +327,6 @@ const Dashboard: React.FC = () => {
             </div>
           )}
       </div>
-      {showCitation && currentConversationIdForCitation !== "" && (
-        <section className="citation-overlay" aria-label="Citation panel">
-          <CitationPanel activeCitation={activeCitation} />
-        </section>
-      )}
     </FluentProvider>
   );
 };

From c4486f26764dd5fd3db5a9a89eaef820afa101b6 Mon Sep 17 00:00:00 2001
From: Yamini-Microsoft <v-yamini3@microsoft.com>
Date: Fri, 15 May 2026 02:50:44 +0530
Subject: [PATCH 2/2] fix: hide citation panel when chat is hidden

Citation should close when Chat panel is hidden since citations
originate from chat responses. ChatHistory toggle remains independent.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/App/src/App.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App/src/App.tsx b/src/App/src/App.tsx
index 780d97e71..0cb68c9d4 100644
--- a/src/App/src/App.tsx
+++ b/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 () => {