Changed page layout

pages/05_GOES_NBR.py

@@ -45,7 +45,7 @@ class Map(geemap.Map):
 @solara.component
 def Page():
     #map_instance = Map(element_id="map")
-
+        
     def update_map(selected_fire):
         Map.clear_layers()
         print("Adding layer")
@@ -65,15 +65,17 @@ def Page():
         elif selected_fire == "August Complex":
             print("Adding August Complex layer")
             Map.addLayer(map_instance.aug_complex, map_instance.dNBRvisParams, 'August Complex GOES NBR', True)
-            
     
-    with solara.Column(style={"min-width": "500px"}):
+    #Add elements to page
+    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+        solara.Select(label="Wildfire Case Study", value=selected_fire, values=fireList, on_value=update_map)
+        solara.Markdown(f"**Selected**: {selected_fire.value}")
+        
+    # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
+    with solara.Column(style={"isolation": "isolate"}):
         map_widget = Map.element(
             center=[40, -100],
             zoom=6,
             height="600px",
         )
-
-    solara.Select(label="Wildfire Case Study", value=selected_fire, values=fireList, on_value=update_map)
-    solara.Markdown(f"**Selected**: {selected_fire.value}")