Merge pull request #32 from josesalazar2025/jose

Cambios en UI para incorporar las posiciones actuales del usuario

frontend/index.html

@@ -183,225 +183,238 @@
 
     <!-- Main content area -->
     <main class="main" id="main">
+      <div class="dashboard-grid view-dashboard">
 
-      <!-- DASHBOARD VIEW -->
-      <section class="view active" id="view-dashboard">
-        <div class="dashboard-grid">
+        <!-- Left: switchable views (map area) -->
+        <div class="main-content-area">
 
-          <!-- Map Panel -->
-          <div class="panel map-panel" id="panel-map">
-            <div class="panel-header" data-panel="map">
-              <div class="panel-title">
-                <span>◈</span>
-                Mapa global
+          <!-- DASHBOARD VIEW -->
+          <section class="view active" id="view-dashboard">
+            <div class="panel map-panel" id="panel-map">
+              <div class="panel-header" data-panel="map">
+                <div class="panel-title">
+                  <span>◈</span>
+                  Mapa global
+                </div>
+                <div class="map-legend">
+                  <div class="legend-item"><div class="legend-dot green"></div>alcista</div>
+                  <div class="legend-item"><div class="legend-dot red"></div>bajista</div>
+                  <div class="legend-item"><div class="legend-dot gray"></div>neutral</div>
+                </div>
+                <span class="panel-toggle">▼</span>
               </div>
-              <div class="map-legend">
-                <div class="legend-item"><div class="legend-dot green"></div>alcista</div>
-                <div class="legend-item"><div class="legend-dot red"></div>bajista</div>
-                <div class="legend-item"><div class="legend-dot gray"></div>neutral</div>
+              <div class="panel-body">
+                <div id="map-container"></div>
               </div>
-              <span class="panel-toggle">▼</span>
             </div>
-            <div class="panel-body">
-              <div id="map-container"></div>
-            </div>
-          </div>
+          </section>
 
-          <!-- Signals Panel -->
-          <div class="panel signals-panel" id="panel-signals">
-            <div class="panel-header" data-panel="signals">
-              <div class="panel-title">
-                <span>◈</span>
-                Señales IA — mercados top
+          <!-- POSITIONS VIEW -->
+          <section class="view" id="view-positions">
+            <div class="panel full-height">
+              <div class="panel-header">
+                <div class="panel-title"><span>◫</span> Simulador — Posiciones abiertas</div>
               </div>
-              <span class="panel-toggle">▼</span>
-            </div>
-            <div class="panel-body">
-              <div class="signals-list" id="signals-list"></div>
-              <div class="positions-separator">
-                <div class="panel-title mb-sm">Mis posiciones</div>
-                <div id="mini-positions"></div>
+              <div class="panel-body">
+                <div class="table-wrap">
+                  <table id="positions-table">
+                    <thead>
+                      <tr>
+                        <th>Mercado</th>
+                        <th>Resultado</th>
+                        <th>Cantidad</th>
+                        <th>Entrada</th>
+                        <th>Actual</th>
+                        <th>G&amp;P</th>
+                        <th>Kelly</th>
+                        <th>Abierta</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody></tbody>
+                  </table>
+                </div>
+                <div class="empty-state hidden" id="positions-empty">No hay posiciones abiertas. Ve al Panel para simular una operación.</div>
               </div>
             </div>
-          </div>
+          </section>
 
-          <!-- Detail Panel -->
-          <div class="panel detail-panel" id="panel-detail">
-            <div class="panel-header" data-panel="detail">
-              <div class="panel-title">
-                <span>◈</span>
-                Detalle del mercado
+          <!-- WATCHLIST VIEW -->
+          <section class="view" id="view-watchlist">
+            <div class="panel full-height">
+              <div class="panel-header">
+                <div class="panel-title"><span>☆</span> Lista de seguimiento</div>
+              </div>
+              <div class="panel-body">
+                <div class="table-wrap">
+                  <table id="watchlist-table">
+                    <thead>
+                      <tr>
+                        <th>Mercado</th>
+                        <th>Categoría</th>
+                        <th>Sí</th>
+                        <th>No</th>
+                        <th>Señal</th>
+                        <th>Volumen</th>
+                        <th>Umbral de alerta</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody></tbody>
+                  </table>
+                </div>
+                <div class="empty-state hidden" id="watchlist-empty">Tu lista de seguimiento está vacía. Añade mercados desde el Panel.</div>
               </div>
-              <span class="panel-toggle">▼</span>
             </div>
-            <div class="panel-body" id="detail-body">
-              <!-- Dynamic content -->
+          </section>
+
+          <!-- ALERTS VIEW -->
+          <section class="view" id="view-alerts">
+            <div class="panel full-height">
+              <div class="panel-header">
+                <div class="panel-title"><span>⚡</span> Historial de alertas</div>
+              </div>
+              <div class="panel-body">
+                <div class="table-wrap">
+                  <table id="alerts-table">
+                    <thead>
+                      <tr>
+                        <th>Hora</th>
+                        <th>Mercado</th>
+                        <th>Tipo</th>
+                        <th>Mensaje</th>
+                      </tr>
+                    </thead>
+                    <tbody></tbody>
+                  </table>
+                </div>
+                <div class="empty-state hidden" id="alerts-empty">Aún no se han enviado alertas.</div>
+              </div>
             </div>
-          </div>
+          </section>
 
-        </div>
-      </section>
+          <!-- PREFERENCES VIEW (desktop only — mobile uses modal) -->
+          <section class="view" id="view-preferences">
+            <div class="panel full-height">
+              <div class="panel-header">
+                <div class="panel-title"><span>⚙</span> Modelo de IA</div>
+              </div>
+              <div class="panel-body">
+                <div class="prefs-view-body">
 
-      <!-- POSITIONS VIEW -->
-      <section class="view" id="view-positions">
-        <div class="panel full-height">
-          <div class="panel-header">
-            <div class="panel-title"><span>◫</span> Simulador — Posiciones abiertas</div>
-          </div>
-          <div class="panel-body">
-            <div class="table-wrap">
-              <table id="positions-table">
-                <thead>
-                  <tr>
-                    <th>Mercado</th>
-                    <th>Resultado</th>
-                    <th>Cantidad</th>
-                    <th>Entrada</th>
-                    <th>Actual</th>
-                    <th>G&amp;P</th>
-                    <th>Kelly</th>
-                    <th>Abierta</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody></tbody>
-              </table>
-            </div>
-            <div class="empty-state hidden" id="positions-empty">No hay posiciones abiertas. Ve al Panel para simular una operación.</div>
-          </div>
-        </div>
-      </section>
+                  <div class="prefs-modes" id="view-prefs-modes">
+                    <button class="prefs-mode-btn active" data-mode="auto">Automático</button>
+                    <button class="prefs-mode-btn" data-mode="external">Proveedor externo</button>
+                    <button class="prefs-mode-btn" data-mode="local">Modelo local</button>
+                    <button class="prefs-mode-btn" data-mode="custom">Personalizado</button>
+                  </div>
 
-      <!-- WATCHLIST VIEW -->
-      <section class="view" id="view-watchlist">
-        <div class="panel full-height">
-          <div class="panel-header">
-            <div class="panel-title"><span>☆</span> Lista de seguimiento</div>
-          </div>
-          <div class="panel-body">
-            <div class="table-wrap">
-              <table id="watchlist-table">
-                <thead>
-                  <tr>
-                    <th>Mercado</th>
-                    <th>Categoría</th>
-                    <th>Sí</th>
-                    <th>No</th>
-                    <th>Señal</th>
-                    <th>Volumen</th>
-                    <th>Umbral de alerta</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody></tbody>
-              </table>
-            </div>
-            <div class="empty-state hidden" id="watchlist-empty">Tu lista de seguimiento está vacía. Añade mercados desde el Panel.</div>
-          </div>
-        </div>
-      </section>
+                  <div class="prefs-section active" id="view-prefs-auto">
+                    <p class="prefs-description">
+                      El servidor usa su cadena de respaldo configurada por variables de entorno:<br>
+                      <strong>DeepSeek → OpenRouter → HuggingFace → Ollama local → regla de precio.</strong>
+                    </p>
+                  </div>
 
-      <!-- ALERTS VIEW -->
-      <section class="view" id="view-alerts">
-        <div class="panel full-height">
-          <div class="panel-header">
-            <div class="panel-title"><span>⚡</span> Historial de alertas</div>
-          </div>
-          <div class="panel-body">
-            <div class="table-wrap">
-              <table id="alerts-table">
-                <thead>
-                  <tr>
-                    <th>Hora</th>
-                    <th>Mercado</th>
-                    <th>Tipo</th>
-                    <th>Mensaje</th>
-                  </tr>
-                </thead>
-                <tbody></tbody>
-              </table>
-            </div>
-            <div class="empty-state hidden" id="alerts-empty">Aún no se han enviado alertas.</div>
-          </div>
-        </div>
-      </section>
+                  <div class="prefs-section" id="view-prefs-external">
+                    <div class="form-group">
+                      <label for="view-prefs-provider">Proveedor</label>
+                      <select class="filter-select prefs-select" id="view-prefs-provider">
+                        <option value="deepseek">DeepSeek API</option>
+                        <option value="openrouter">OpenRouter</option>
+                        <option value="huggingface">HuggingFace Inference</option>
+                      </select>
+                    </div>
+                    <div class="form-group">
+                      <label for="view-prefs-api-key">Clave API</label>
+                      <input type="password" id="view-prefs-api-key" placeholder="sk-..." autocomplete="off" />
+                    </div>
+                  </div>
 
-      <!-- PREFERENCES VIEW (desktop only — mobile uses modal) -->
-      <section class="view" id="view-preferences">
-        <div class="panel full-height">
-          <div class="panel-header">
-            <div class="panel-title"><span>⚙</span> Modelo de IA</div>
-          </div>
-          <div class="panel-body">
-            <div class="prefs-view-body">
+                  <div class="prefs-section" id="view-prefs-local">
+                    <p class="prefs-description">Compatible con Ollama. Usa <code>/api/chat</code> en la URL base.</p>
+                    <div class="form-group">
+                      <label for="view-prefs-local-url">URL del servidor</label>
+                      <input type="text" id="view-prefs-local-url" placeholder="http://localhost:11434" />
+                    </div>
+                    <div class="form-group">
+                      <label for="view-prefs-local-model">Nombre del modelo</label>
+                      <input type="text" id="view-prefs-local-model" placeholder="qwen3:8b" />
+                    </div>
+                  </div>
 
-              <div class="prefs-modes" id="view-prefs-modes">
-                <button class="prefs-mode-btn active" data-mode="auto">Automático</button>
-                <button class="prefs-mode-btn" data-mode="external">Proveedor externo</button>
-                <button class="prefs-mode-btn" data-mode="local">Modelo local</button>
-                <button class="prefs-mode-btn" data-mode="custom">Personalizado</button>
-              </div>
+                  <div class="prefs-section" id="view-prefs-custom">
+                    <p class="prefs-description">Cualquier endpoint compatible con OpenAI Chat Completions.</p>
+                    <div class="form-group">
+                      <label for="view-prefs-custom-url">Endpoint URL</label>
+                      <input type="text" id="view-prefs-custom-url" placeholder="https://api.example.com/v1/chat/completions" />
+                    </div>
+                    <div class="form-group">
+                      <label for="view-prefs-custom-key">Clave API (opcional)</label>
+                      <input type="password" id="view-prefs-custom-key" placeholder="sk-..." autocomplete="off" />
+                    </div>
+                    <div class="form-group">
+                      <label for="view-prefs-custom-model">Nombre del modelo</label>
+                      <input type="text" id="view-prefs-custom-model" placeholder="gpt-4o-mini" />
+                    </div>
+                  </div>
 
-              <div class="prefs-section active" id="view-prefs-auto">
-                <p class="prefs-description">
-                  El servidor usa su cadena de respaldo configurada por variables de entorno:<br>
-                  <strong>DeepSeek → OpenRouter → HuggingFace → Ollama local → regla de precio.</strong>
-                </p>
-              </div>
+                  <div class="form-status" id="view-prefs-status"></div>
+                  <div class="form-actions form-actions--end">
+                    <button type="button" class="btn-ghost" id="btn-view-save-prefs">Guardar</button>
+                  </div>
 
-              <div class="prefs-section" id="view-prefs-external">
-                <div class="form-group">
-                  <label for="view-prefs-provider">Proveedor</label>
-                  <select class="filter-select prefs-select" id="view-prefs-provider">
-                    <option value="deepseek">DeepSeek API</option>
-                    <option value="openrouter">OpenRouter</option>
-                    <option value="huggingface">HuggingFace Inference</option>
-                  </select>
-                </div>
-                <div class="form-group">
-                  <label for="view-prefs-api-key">Clave API</label>
-                  <input type="password" id="view-prefs-api-key" placeholder="sk-..." autocomplete="off" />
                 </div>
               </div>
+            </div>
+          </section>
 
-              <div class="prefs-section" id="view-prefs-local">
-                <p class="prefs-description">Compatible con Ollama. Usa <code>/api/chat</code> en la URL base.</p>
-                <div class="form-group">
-                  <label for="view-prefs-local-url">URL del servidor</label>
-                  <input type="text" id="view-prefs-local-url" placeholder="http://localhost:11434" />
-                </div>
-                <div class="form-group">
-                  <label for="view-prefs-local-model">Nombre del modelo</label>
-                  <input type="text" id="view-prefs-local-model" placeholder="qwen3:8b" />
-                </div>
-              </div>
+        </div>
 
-              <div class="prefs-section" id="view-prefs-custom">
-                <p class="prefs-description">Cualquier endpoint compatible con OpenAI Chat Completions.</p>
-                <div class="form-group">
-                  <label for="view-prefs-custom-url">Endpoint URL</label>
-                  <input type="text" id="view-prefs-custom-url" placeholder="https://api.example.com/v1/chat/completions" />
-                </div>
-                <div class="form-group">
-                  <label for="view-prefs-custom-key">Clave API (opcional)</label>
-                  <input type="password" id="view-prefs-custom-key" placeholder="sk-..." autocomplete="off" />
-                </div>
-                <div class="form-group">
-                  <label for="view-prefs-custom-model">Nombre del modelo</label>
-                  <input type="text" id="view-prefs-custom-model" placeholder="gpt-4o-mini" />
-                </div>
-              </div>
+        <!-- Right: always visible -->
+        <div class="panel signals-panel" id="panel-signals">
+          <div class="panel-header" data-panel="signals">
+            <div class="panel-title">
+              <span>◈</span>
+              Señales IA — mercados top
+            </div>
+            <span class="panel-toggle">▼</span>
+          </div>
+          <div class="panel-body">
+            <div class="signals-list" id="signals-list"></div>
+          </div>
+        </div>
 
-              <div class="form-status" id="view-prefs-status"></div>
-              <div class="form-actions">
-                <button type="button" class="modal-submit" id="btn-view-save-prefs">Guardar</button>
+        <!-- Bottom-left: positions + detail side by side -->
+        <div class="bottom-panels">
+          <div class="panel positions-mini-panel" id="panel-positions-mini">
+            <div class="panel-header" data-panel="positions-mini">
+              <div class="panel-title">
+                <span>◫</span>
+                Mis posiciones
               </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body">
+              <div id="mini-positions"></div>
+            </div>
+          </div>
 
+          <div class="panel detail-panel" id="panel-detail">
+            <div class="panel-header" data-panel="detail">
+              <div class="panel-title">
+                <span>◈</span>
+                Detalle del mercado
+              </div>
+              <span class="panel-toggle">▼</span>
+            </div>
+            <div class="panel-body" id="detail-body">
+              <!-- Dynamic content -->
             </div>
           </div>
         </div>
-      </section>
 
+      </div>
     </main>
   </div>
 

frontend/src/app.js

@@ -620,6 +620,7 @@ function switchView(viewName) {
   state.view = viewName
   document.querySelectorAll('.view').forEach((v) => v.classList.toggle('active', v.id === `view-${viewName}`))
   document.querySelectorAll('.nav-item').forEach((v) => v.classList.toggle('active', v.dataset.view === viewName))
+  document.querySelector('.dashboard-grid')?.classList.toggle('view-dashboard', viewName === 'dashboard')
   if (viewName === 'positions') renderPositions()
   if (viewName === 'watchlist') renderWatchlist()
   if (viewName === 'alerts') renderAlerts()
@@ -913,12 +914,13 @@ function renderMiniPositions() {
     const cls = (p.pnl || 0) >= 0 ? 'green' : 'red'
     const sign = (p.pnl || 0) >= 0 ? '+' : ''
 
-    const row = el('div', 'flex-between mb-6')
+    const row = el('div', 'flex-between mb-6 pos-row')
     const label = el('span', 'text-sm text-neutral font-mono')
     label.textContent = `${(m.question || p.marketId).substring(0, 32)}${(m.question || p.marketId).length > 32 ? '…' : ''} ${translateOutcome(p.outcome)}`
     const val = el('span', `text-base font-semibold text-${cls} font-mono`)
     val.textContent = `${sign}€${(p.pnl || 0).toFixed(2)}`
     row.append(label, val)
+    row.addEventListener('click', () => selectMarket(p.marketId))
     container.appendChild(row)
   })
 
@@ -1452,6 +1454,12 @@ async function initAppData() {
 /* ─── Inicialización ─── */
 export async function init() {
   document.getElementById('sidebar-toggle')?.addEventListener('click', toggleSidebar)
+  document.querySelector('.topbar-logo')?.addEventListener('click', () => {
+    if (window.matchMedia('(max-width: 640px)').matches) {
+      switchView('dashboard')
+      document.getElementById('main')?.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  })
 
   document.querySelectorAll('.nav-item').forEach((item) => {
     item.addEventListener('click', () => switchView(item.dataset.view))

frontend/src/map.js

@@ -204,14 +204,16 @@ export function init(containerId, markets, signals, onSelect) {
     attributionControl: false,
     minZoom: 2,
     maxZoom: 6,
-    worldCopyJump: true,
+    maxBounds: [[-90, -180], [90, 180]],
   }).setView([25, 10], 2)
 
   // Capa de tiles oscura (CartoDB Dark Matter)
-  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
     attribution: '©OpenStreetMap ©CartoDB',
     subdomains: 'abcd',
     maxZoom: 19,
+    noWrap: true,
+    bounds: [[-90, -180], [90, 180]],
   }).addTo(mapInstance)
 
   mapInstance.on('zoomend', updateDiagonalLines)

frontend/src/style.css

@@ -405,6 +405,27 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 .view { display: none; }
 .view.active { display: block; height: 100%; }
 
+/* Container for switchable views (left side) */
+.main-content-area {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.main-content-area > .view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.main-content-area .panel {
+  height: 100%;
+}
+
 /* ─── Dashboard layout ─── */
 .dashboard-grid {
   display: grid;
@@ -472,12 +493,6 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   color: var(--text3);
 }
 
-.positions-separator {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 0.5px solid var(--border);
-}
-
 .panel-title.mb-sm {
   margin-bottom: 8px;
 }
@@ -526,7 +541,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   width: 100%;
   height: 100%;
   min-height: 300px;
-  background: var(--bg3);
+  background: #262626;
   border-radius: var(--radius-sm);
   overflow: hidden;
 }
@@ -799,13 +814,41 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
   background: rgba(240,64,64,0.05);
 }
 
-/* Panel detalle */
-.detail-panel {
+/* Contenedor inferior: posiciones + detalle */
+.bottom-panels {
+  display: flex;
+  gap: var(--panel-gap);
   grid-row: 2 / 3;
   grid-column: 1 / 2;
+  min-height: 0;
   overflow: hidden;
 }
 
+.positions-mini-panel {
+  width: 420px;
+  flex-shrink: 0;
+}
+
+.pos-row {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  padding: 4px 6px;
+  margin-left: -6px;
+  margin-right: -6px;
+  transition: background 0.12s;
+}
+
+.pos-row:hover {
+  background: rgba(255,255,255,0.05);
+}
+
+/* Panel detalle ocupa el espacio restante */
+.detail-panel {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
 .detail-panel .panel-body {
   overflow: hidden;
 }
@@ -920,7 +963,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 .outcome-card.no .outcome-price { color: var(--red); }
 
 .chart-container {
-  flex: 2;
+  flex: 7;
   background: var(--bg3);
   border: 0.5px solid var(--border);
   border-radius: var(--radius-sm);
@@ -977,7 +1020,7 @@ h6 { font-size: var(--fs-h6); line-height: 1.4;  font-weight: 500; }
 }
 
 .ai-box {
-  flex: 1;
+  flex: 8;
   background: var(--bg3);
   border: 0.5px solid var(--blue2);
   border-radius: var(--radius-sm);
@@ -1167,7 +1210,7 @@ td {
 
 /* ─── Leaflet overrides ─── */
 #app .leaflet-container {
-  background: var(--bg3);
+  background: #262626;
   font-family: var(--font-mono);
 }
 
@@ -1597,6 +1640,10 @@ td {
   margin-top: 4px;
 }
 
+.form-actions--end {
+  justify-content: flex-end;
+}
+
 .modal-submit--secondary {
   background: var(--bg3);
   color: var(--text);
@@ -1884,21 +1931,44 @@ td {
 
   .dashboard-grid {
     grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: auto;
   }
-  .signals-panel {
+  .main-content-area {
     grid-row: auto;
     grid-column: auto;
-    max-height: 400px;
+    min-height: 300px;
+    position: relative;
   }
-  .map-panel {
+  .main-content-area > .view {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 100%;
+    height: auto;
+  }
+  .main-content-area .panel {
+    height: auto;
+  }
+  .signals-panel,
+  .bottom-panels {
+    display: none;
+  }
+  .dashboard-grid.view-dashboard .signals-panel,
+  .dashboard-grid.view-dashboard .bottom-panels {
+    display: flex;
     grid-row: auto;
     grid-column: auto;
-    min-height: 300px;
   }
-  .detail-panel {
+  .dashboard-grid.view-dashboard .signals-panel {
+    max-height: 400px;
+  }
+  .positions-mini-panel {
+    display: none;
+  }
+  .map-panel {
     grid-row: auto;
     grid-column: auto;
+    min-height: 300px;
   }
 }
 
@@ -2017,6 +2087,7 @@ td {
     height: auto;
     order: 0;
     flex: 1;
+    cursor: pointer;
   }
 
   .topbar-actions {
@@ -2084,17 +2155,64 @@ td {
   /* Dashboard grid scrolls instead of stretching to fill viewport */
   .dashboard-grid {
     height: auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
   }
 
-  /* Remove fixed heights on panels so collapsed state can fully shrink */
-  .map-panel {
-    min-height: 250px;
+  /* Switchable views flow normally on mobile */
+  .main-content-area {
+    grid-row: auto;
+    grid-column: auto;
+    position: relative;
+    min-height: auto;
+  }
+
+  .main-content-area > .view {
+    position: relative;
+    top: auto;
+    left: auto;
+    width: 100%;
+    height: auto;
   }
 
-  .signals-panel {
+  .main-content-area .panel {
+    height: auto;
+  }
+
+  /* Hide persistent panels by default on mobile */
+  .signals-panel,
+  .bottom-panels {
+    display: none;
+  }
+
+  /* Only show panels when on dashboard view */
+  .dashboard-grid.view-dashboard .signals-panel,
+  .dashboard-grid.view-dashboard .bottom-panels {
+    display: flex;
+    grid-row: auto;
+    grid-column: auto;
+  }
+
+  .dashboard-grid.view-dashboard .signals-panel {
     max-height: none;
   }
 
+  .dashboard-grid.view-dashboard .bottom-panels {
+    overflow: hidden;
+  }
+
+  .positions-mini-panel {
+    display: none;
+  }
+
+  /* Remove fixed heights on panels so collapsed state can fully shrink */
+  .main-content-area {
+    min-height: 250px;
+  }
+  .map-panel {
+    min-height: 250px;
+  }
+
   .panel.collapsed {
     min-height: 0;
     max-height: none;