From ea6af0ea825574fea8d28cda2060f0d3053cda7a Mon Sep 17 00:00:00 2001
From: Manohar <manohar@manohargupta.com>
Date: Sat, 9 May 2026 04:19:38 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20each=20collapsible=20section=20is=20now?=
 =?UTF-8?q?=20independent=20=E2=80=94=20proper=20div=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index 24c2f9e..0e68b5b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -138,9 +138,12 @@
       <button class="rbtn on" onclick="loadChart(8)" id="b8">8H</button>
       <button class="rbtn" onclick="loadChart(24)" id="b24">24H</button>
       <button class="rbtn" onclick="loadChart(72)" id="b72">3D</button>
-    </div><div class="collapse-body">
-  </div></div>
-  <div class="collapse-body"><div class="chart-wrap"><canvas id="pnl-chart"></canvas><div class="chart-empty" id="chart-empty">No history yet &#8212; populates after first poll cycle</div></div>
+    </div>
+    <span class="collapse-arrow">&#9660;</span>
+  </div>
+  <div class="collapse-body">
+    <div class="chart-wrap"><canvas id="pnl-chart"></canvas><div class="chart-empty" id="chart-empty">No history yet &#8212; populates after first poll cycle</div></div>
+  </div>
 </div>
 <div class="card collapsible" id="sec-pos" style="margin-bottom:16px">
   <div class="card-head" onclick="toggleCard('sec-pos')"><span class="card-title">Option Positions</span><div class="live-badge"><span class="ldot"></span>Live</div><span class="collapse-arrow">&#9660;</span></div>
@@ -148,14 +151,14 @@
     <thead><tr><th>Symbol</th><th>Qty</th><th>LTP</th><th>Avg Cost</th><th>Unrealised</th><th>Realised</th><th>Total P&amp;L</th></tr></thead>
     <tbody id="pos-body"><tr><td colspan="7" style="text-align:center;padding:36px;color:var(--text3)">Loading&#8230;</td></tr></tbody>
     <tfoot id="pos-foot" style="display:none"><tr><td colspan="4">Portfolio Total</td><td id="f-u" class="mono">&#8212;</td><td id="f-r" class="mono">&#8212;</td><td id="f-t" class="mono">&#8212;</td></tr></tfoot>
-  </table>
+  </table></div>
 </div>
 <div class="card collapsible" id="sec-alrt" style="margin-bottom:16px">
   <div class="card-head" onclick="toggleCard('sec-alrt')"><span class="card-title">Alert History</span><span class="collapse-arrow">&#9660;</span></div>
   <div class="collapse-body"><table>
     <thead><tr><th>Symbol</th><th>P&amp;L at Alert</th><th>Anchor</th><th>Move</th><th>LTP</th><th>Time (IST)</th></tr></thead>
     <tbody id="alrt-body"><tr><td colspan="6" style="text-align:center;padding:28px;color:var(--text3)">No alerts yet</td></tr></tbody>
-  </table>
+  </table></div>
 </div>
 <div class="card collapsible" id="sec-cfg" style="margin-bottom:16px">
   <div class="card-head" onclick="toggleCard('sec-cfg')">