fix: update legend icons for better alignment

Author: noamjgal

css/styles.css

@@ -750,18 +750,18 @@ body {
     display: flex;
     flex-direction: column;
     gap: var(--space-xs);
-    align-items: center;
+    align-items: flex-start;
+    width: 100%;
+    padding-left: var(--space-lg);
 }
 
 .legend-item {
     display: flex;
     align-items: center;
-    justify-content: center;
     font-size: clamp(13px, 1.1vw, 15px);
     color: var(--text-primary);
     padding: var(--space-xs) 0;
     font-weight: 500;
-    text-align: center;
     gap: var(--space-sm);
 }
 
@@ -782,6 +782,15 @@ body {
     object-fit: contain;
 }
 
+.legend-color-box {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 3px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-sizing: border-box;
+}
+
 .legend-label {
     font-size: clamp(13px, 1.1vw, 15px);
     font-weight: 500;

js/app.js

@@ -1277,12 +1277,11 @@ class ShelterAccessApp {
                 img.className = 'legend-icon-img';
                 iconDiv.appendChild(img);
             } else if (item.type === 'color-box') {
-                // Use color boxes for polygon layers and building footprints
-                iconDiv.style.cssText = `
-                    background: ${item.color};
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 3px;
-                `;
+                // Use inner div for color boxes to match SVG icon structure
+                const colorBox = document.createElement('div');
+                colorBox.className = 'legend-color-box';
+                colorBox.style.background = item.color;
+                iconDiv.appendChild(colorBox);
             }
 
             const label = document.createElement('span');