From 1278b5d4ebc3ae0ecce2715edb34124d7f119b76 Mon Sep 17 00:00:00 2001
From: Deep Koluguri <deepkoluguri@gmail.com>
Date: Sat, 27 Jun 2026 15:02:34 -0400
Subject: [PATCH] style: Move StockDetailPanel directly under the search bar
 for better UX

---
 frontend/src/App.jsx                                 | 12 +++++-------
 .../src/components/dashboard/MarketScreenerPanel.jsx | 12 +++++++++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 435c20e..aec1070 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -66,13 +66,11 @@ export default function App() {
           </TabsList>
 
           <TabsContent value="market" className="mt-6 space-y-6">
-            <MarketScreenerPanel onSelectSymbol={setSelectedSymbol} />
-            {selectedSymbol && (
-              <StockDetailPanel
-                symbol={selectedSymbol}
-                onClose={() => setSelectedSymbol(null)}
-              />
-            )}
+            <MarketScreenerPanel 
+              selectedSymbol={selectedSymbol}
+              onSelectSymbol={setSelectedSymbol} 
+              onCloseSymbol={() => setSelectedSymbol(null)}
+            />
           </TabsContent>
 
           <TabsContent value="flow" className="mt-6">
diff --git a/frontend/src/components/dashboard/MarketScreenerPanel.jsx b/frontend/src/components/dashboard/MarketScreenerPanel.jsx
index a95170c..f0161ab 100644
--- a/frontend/src/components/dashboard/MarketScreenerPanel.jsx
+++ b/frontend/src/components/dashboard/MarketScreenerPanel.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import MacroIndicatorsPanel from './MacroIndicatorsPanel';
+import StockDetailPanel from './StockDetailPanel';
 
 const API_BASE = import.meta.env.VITE_API_URL || '';
 
@@ -203,7 +204,7 @@ function SearchBar({ onResult, onClear }) {
 }
 
 // ─── Main Component ───────────────────────────────────────────────────────────
-export default function MarketScreenerPanel({ onSelectSymbol }) {
+export default function MarketScreenerPanel({ selectedSymbol, onSelectSymbol, onCloseSymbol }) {
   const [screenerData, setScreenerData] = useState(null);
   const [leaderboard, setLeaderboard]   = useState(null);
   const [loading, setLoading]           = useState(true);
@@ -308,6 +309,15 @@ export default function MarketScreenerPanel({ onSelectSymbol }) {
           </div>
         </div>
 
+        {selectedSymbol && (
+          <div className="p-5 border-b border-slate-700/40 bg-slate-900">
+            <StockDetailPanel
+              symbol={selectedSymbol}
+              onClose={onCloseSymbol}
+            />
+          </div>
+        )}
+
         {/* ─── Factor Grid ─────────────────────────────────────────────────── */}
         <div className="p-5 bg-slate-950/50">
           <div className="mb-6 bg-blue-950/20 border border-blue-900/50 p-4 rounded-lg flex items-start gap-3 text-sm text-slate-300 max-w-4xl shadow-inner">