Implement comprehensive mobile responsiveness for wind visualization

Mobile map improvements:
- Changed map height from 600px to 80vh for better mobile scaling
- Added responsive CSS for forecast timeline controls
- Mobile forecast bar: larger buttons, better touch targets
- Enhanced timeline visibility with bigger text and buttons

Mobile forecast controls:
- Tablets (768px): 40px nav buttons, 35px hour buttons, improved spacing
- Phones (480px): 35px nav buttons, 30px hour buttons, compact layout
- Full-width forecast bar on mobile with proper padding
- Better touch targets for hour selection buttons

Mobile interface optimization:
- Map takes 85-95vh on mobile (vs 600px fixed height)
- Responsive Gradio container with minimal padding
- Portrait mode: hides controls on very small screens for max map space
- Wind control buttons properly sized for mobile interaction

Result: Forecast timeline fully visible and usable on all mobile devices
with significantly larger map area for better wind visualization.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -481,7 +481,7 @@ def create_wind_map(region="global", forecast_mode=False):
         zoom_start=zoom,
         control_scale=True,
         width='100%',
-        height='600px'
+        height='80vh'  # Use viewport height for better mobile scaling
     )
     
     # Add light theme option (but don't make it active by default)
@@ -505,9 +505,108 @@ def create_wind_map(region="global", forecast_mode=False):
         forecast_data = None
         log_step(6, f"Current data ready: 10m={len(wind_data_10m)} components, 100m={len(wind_data_100m)} components")
     
-    # Add Leaflet-Velocity from CDN
+    # Add Leaflet-Velocity from CDN with mobile-responsive CSS
     velocity_css = """
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <style>
+    /* Mobile responsiveness for forecast controls */
+    @media (max-width: 768px) {
+        .forecast-controls {
+            bottom: 5px !important;
+            left: 5px !important;
+            right: 5px !important;
+            transform: none !important;
+            width: auto !important;
+            padding: 15px !important;
+            font-size: 14px !important;
+        }
+        .forecast-timeline {
+            flex-wrap: wrap !important;
+            justify-content: center !important;
+            gap: 8px !important;
+        }
+        .forecast-hour-btn {
+            min-width: 35px !important;
+            padding: 8px 10px !important;
+            font-size: 12px !important;
+            margin: 2px !important;
+        }
+        .forecast-prev, .forecast-next {
+            width: 40px !important;
+            height: 40px !important;
+            font-size: 18px !important;
+        }
+        .forecast-hour-display {
+            font-size: 16px !important;
+            min-width: 35px !important;
+        }
+        .wind-controls {
+            top: 5px !important;
+            right: 5px !important;
+            padding: 8px !important;
+        }
+        .wind-controls button {
+            width: 140px !important;
+            padding: 8px !important;
+            font-size: 12px !important;
+        }
+        /* Make map container fill screen on mobile */
+        .leaflet-container {
+            height: 85vh !important;
+        }
+    }
+    
+    /* Small mobile phones */
+    @media (max-width: 480px) {
+        .forecast-controls {
+            padding: 10px 8px !important;
+            font-size: 12px !important;
+        }
+        .forecast-hour-btn {
+            min-width: 30px !important;
+            padding: 6px 8px !important;
+            font-size: 11px !important;
+        }
+        .forecast-prev, .forecast-next {
+            width: 35px !important;
+            height: 35px !important;
+            font-size: 16px !important;
+        }
+        .wind-controls {
+            padding: 6px !important;
+        }
+        .wind-controls button {
+            width: 120px !important;
+            padding: 6px !important;
+            font-size: 11px !important;
+        }
+        .leaflet-container {
+            height: 90vh !important;
+        }
+        /* Mobile Gradio interface improvements */
+        .gradio-container {
+            max-width: 100% !important;
+            padding: 0 !important;
+        }
+        .gr-row {
+            flex-direction: column !important;
+        }
+        .gr-column {
+            width: 100% !important;
+            max-width: 100% !important;
+        }
+    }
+    
+    /* Hide Gradio controls on very small screens to maximize map space */
+    @media (max-width: 480px) and (orientation: portrait) {
+        .gradio-container .gr-row:first-child {
+            display: none !important;
+        }
+        .leaflet-container {
+            height: 95vh !important;
+        }
+    }
+    </style>
     """
     m.get_root().html.add_child(Element(velocity_css))
     
@@ -1282,7 +1381,27 @@ def update_visualization(region, forecast_mode=False):
         _processing_state["is_processing"] = False
 
 # Create Gradio interface
-with gr.Blocks(title="Wind Particle Visualization") as app:
+with gr.Blocks(title="Wind Particle Visualization", css="""
+    @media (max-width: 768px) {
+        .gradio-container {
+            padding: 8px !important;
+        }
+        .gr-column {
+            min-height: auto !important;
+        }
+        .gradio-html {
+            min-height: 85vh !important;
+        }
+    }
+    @media (max-width: 480px) {
+        .gradio-container {
+            padding: 4px !important;
+        }
+        .gradio-html {
+            min-height: 90vh !important;
+        }
+    }
+""") as app:
     
     gr.Markdown("""
     # 🌪️ ECMWF Wind Visualization with Forecast - v4.0 LIVE