refactor: update legend section title and improve layout styles for better alignment

Author: noamjgal

css/styles.css

@@ -535,13 +535,15 @@ body {
 
 .legend-layers-section {
     padding: var(--space-md);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .legend-scale-section {
     padding: var(--space-sm) var(--space-md);
     display: flex;
     justify-content: center;
-    border-top: 1px solid var(--glass-border);
 }
 
 .legend-section-title {
@@ -551,31 +553,30 @@ body {
     text-transform: uppercase;
     letter-spacing: 0.8px;
     margin-bottom: var(--space-sm);
+    text-align: center;
 }
 
 .legend-items {
     display: flex;
     flex-direction: column;
     gap: var(--space-xs);
+    align-items: center;
 }
 
 .legend-item {
     display: flex;
     align-items: center;
-    font-size: clamp(10px, 0.8vw, 12px);
+    justify-content: center;
+    font-size: clamp(12px, 1vw, 14px);
     color: var(--text-primary);
-    padding: var(--space-sm) var(--space-md);
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: var(--radius-sm);
+    padding: var(--space-xs) 0;
     font-weight: 500;
-    min-height: 32px;
+    text-align: center;
 }
 
 .legend-icon {
     width: 16px;
     height: 16px;
-    margin-right: var(--space-sm);
     flex-shrink: 0;
     display: flex;
     align-items: center;
@@ -627,7 +628,6 @@ body {
     padding: var(--space-sm) var(--space-md);
     display: flex;
     justify-content: center;
-    border-top: 1px solid var(--glass-border);
 }
 
 .legend-controls {

index.html

@@ -204,7 +204,7 @@ <h2>Shelter Analysis</h2>
       <div class="map-legend-panel" id="mapLegendPanel">
         <!-- Data Layers Legend Section -->
         <div class="legend-layers-section">
-          <div class="legend-section-title">Legend</div>
+          <div class="legend-section-title">Legend & Layer Controls</div>
           <div class="legend-items" id="legend-items"></div>
         </div>
 

js/app.js

@@ -1152,7 +1152,7 @@ class ShelterAccessApp {
 
         const legendItems = [];
 
-        // Building Footprints - always show when visible
+        // Always-on layers - Building Footprints and Existing Shelters
         if (this.layerVisibility.buildings) {
             legendItems.push({
                 type: 'color-box',
@@ -1163,7 +1163,6 @@ class ShelterAccessApp {
             });
         }
 
-        // Shelter layers - only when visible
         if (this.layerVisibility.existingShelters) {
             legendItems.push({
                 type: 'svg-icon',
@@ -1174,6 +1173,7 @@ class ShelterAccessApp {
             });
         }
 
+        // Optional layers - only when visible
         if (this.layerVisibility.requestedShelters) {
             legendItems.push({
                 type: 'svg-icon',
@@ -1218,14 +1218,14 @@ class ShelterAccessApp {
         // Clear existing legend items
         this.elements.legendItems.innerHTML = '';
 
-        // Only show legend if there are visible items
+        // Show legend section even if empty (it will just show the title)
+        this.elements.legendItems.style.display = 'block';
+        
+        // Only add items if there are any
         if (legendItems.length === 0) {
-            this.elements.legendItems.style.display = 'none';
             return;
         }
 
-        this.elements.legendItems.style.display = 'block';
-        
         // Add new legend items with proper symbology
         legendItems.forEach(item => {
             const legendItem = document.createElement('div');