From 8caeb4b961b0946d383e1f7f221a117b4fdf1b1f Mon Sep 17 00:00:00 2001
From: James Smith <jamessmith1@outlook.com>
Date: Wed, 13 May 2026 09:45:00 +0100
Subject: [PATCH] fix(drone): fix main panel height collapse in flex output
 container

Replace height:100% with flex:1+min-height:0 on .drone-visuals-container
so it fills the flex-column .output-panel correctly (height:100% collapses
inside a scroll container). Add min-height:400px to .drone-main-map so
Leaflet has pixel dimensions to render into.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/modes/drone.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/static/css/modes/drone.css b/static/css/modes/drone.css
index d417b16..2b56888 100644
--- a/static/css/modes/drone.css
+++ b/static/css/modes/drone.css
@@ -4,8 +4,8 @@
 .drone-visuals-container {
     display: none;
     flex-direction: column;
-    width: 100%;
-    height: 100%;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
     background: var(--bg-primary);
     padding: 0;
@@ -67,6 +67,7 @@
 .drone-main-map {
     flex: 1;
     min-width: 0;
+    min-height: 400px;
 }
 
 .drone-empty-state {