From c0c598b86a80f28d4411d1b4f230c49a7d531662 Mon Sep 17 00:00:00 2001
From: Richard <bergmann.richard@fastmail.de>
Date: Sun, 5 Jul 2026 20:23:16 +0200
Subject: [PATCH] Fix Trader Detail Page layout constraint and improve menu bar

---
 src/Predictalytics.Api/wwwroot/index.html | 25 +++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/Predictalytics.Api/wwwroot/index.html b/src/Predictalytics.Api/wwwroot/index.html
index 1097f24..5d5417b 100644
--- a/src/Predictalytics.Api/wwwroot/index.html
+++ b/src/Predictalytics.Api/wwwroot/index.html
@@ -180,15 +180,23 @@
 
             <!-- Trader Detail Page -->
             <section class="page" id="page-trader-detail">
-                <div class="detail-header" style="justify-content:space-between">
+                <!-- Trader Detail Menu Bar -->
+                <div class="detail-header" style="justify-content:space-between; background:var(--bg-surface); padding:16px; border-radius:8px; border:1px solid var(--border); margin-bottom:24px; box-shadow:0 4px 12px rgba(0,0,0,0.1);">
                     <div style="display:flex; align-items:center; gap:16px">
-                        <button class="btn-back" onclick="navigateBack()">← Back</button>
-                        <h1 class="page-title" id="td-name" style="margin-bottom:0">Trader Name</h1>
-                        <button class="btn-sm" id="btn-toggle-watchlist" style="padding:4px 8px; margin-left:10px; background:var(--bg-input);">☆ Watchlist</button>
+                        <button class="btn-back" onclick="navigateBack()" style="background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-weight:bold; font-size:16px;">← Back</button>
+                        <div style="width:1px; height:24px; background:var(--border);"></div>
+                        <h1 class="page-title" id="td-name" style="margin-bottom:0; font-size:24px;">Trader Name</h1>
                     </div>
-                    <div>
-                        <button class="btn-sm" id="btn-open-platform" style="padding:8px 16px; background:var(--primary); display:none; margin-right:10px;">Open Platform</button>
-                        <button class="btn-sm" id="btn-refresh-trader" style="padding:8px 16px; background:var(--bg-input)">Sync History</button>
+                    <div style="display:flex; gap:12px;">
+                        <button class="btn-sm" id="btn-toggle-watchlist" style="padding:8px 16px; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-weight:500; transition:all 0.2s;">
+                            ☆ Watchlist
+                        </button>
+                        <button class="btn-sm" id="btn-open-platform" style="padding:8px 16px; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-weight:500; transition:all 0.2s; display:none;">
+                            🌐 Open Platform
+                        </button>
+                        <button class="btn-sm" id="btn-refresh-trader" style="padding:8px 16px; background:var(--primary); color:#000; border:none; border-radius:6px; cursor:pointer; font-weight:bold; transition:all 0.2s;">
+                            ⟱ Sync History
+                        </button>
                     </div>
                 </div>
                 <div class="detail-grid">
@@ -211,7 +219,8 @@
                                 <div class="stat-value" id="td-strategy">—</div>
                             </div>
                         </div>
-                             <div class="detail-main">
+                    </div>
+                    <div class="detail-main">
                         <!-- Tabs Navigation -->
                         <div class="tabs-nav" style="display:flex; gap:16px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:8px;">
                             <button class="btn-tab active" data-tab="td-tab-analytics" onclick="switchTraderTab('td-tab-analytics')" style="background:transparent; border:none; color:var(--text); font-weight:bold; cursor:pointer;">Analytics & AI</button>