fix: eew intensity legend to vertical left

Author: bamboo0403

lib/app/map/_lib/managers/monitor.dart

@@ -17,6 +17,7 @@ import 'package:dpip/utils/extensions/number.dart';
 import 'package:dpip/utils/instrumental_intensity_color.dart';
 import 'package:dpip/utils/intensity_color.dart';
 import 'package:dpip/utils/log.dart';
+import 'package:dpip/widgets/blurred_container.dart';
 import 'package:dpip/widgets/map/intensity_legend.dart';
 import 'package:dpip/widgets/map/map.dart';
 import 'package:dpip/widgets/responsive/responsive_container.dart';
@@ -1635,17 +1636,20 @@ class _MonitorMapLayerSheetState extends State<MonitorMapLayerSheet> {
                 },
               ),
             ),
-            // Intensity legend - positioned at top right, just below buttons
+            // Intensity legend - positioned at top left
             // Show RTS mode when no EEW, show EEW mode during EEW
-            // Hide when sheet is expanded
             Positioned(
-              top: 80,
-              right: 16,
+              top: 24 + 48 + 16,
+              left: 24,
               child: SafeArea(
-                child: IntensityLegend(
-                  mode: activeEew.isNotEmpty
-                      ? IntensityLegendMode.eew
-                      : IntensityLegendMode.rts,
+                child: BlurredContainer(
+                  elevation: 4,
+                  shadowColor: context.colors.shadow.withValues(alpha: 0.4),
+                  child: IntensityLegend(
+                    mode: activeEew.isNotEmpty
+                        ? IntensityLegendMode.eew
+                        : IntensityLegendMode.rts,
+                  ),
                 ),
               ),
             ),

lib/widgets/map/intensity_legend.dart

@@ -17,90 +17,84 @@ class IntensityLegend extends StatelessWidget {
 
   List<Color> get _colors => mode == IntensityLegendMode.eew
       ? List.generate(9, (i) => IntensityColor.intensity(i + 1))
-      : List.generate(11, (i) => InstrumentalIntensityColor.intensity(i - 3));
+      : List.generate(11, (i) => InstrumentalIntensityColor.intensity(7 - i));
 
   List<String> get _labels => mode == IntensityLegendMode.eew
       ? const ['1', '2', '3', '4', '5⁻', '5⁺', '6⁻', '6⁺', '7']
       : const ['-3', '-2', '-1', '0', '1', '2', '3', '4', '5', '6', '7'];
 
   @override
   Widget build(BuildContext context) {
-    final screenWidth = MediaQuery.of(context).size.width;
-    final width = screenWidth / 2;
-
-    return SizedBox(
-      width: width,
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.end,
-        children: [
-          _buildColorBar(width),
-          const SizedBox(height: 2),
-          _buildLabels(width),
-        ],
-      ),
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: _buildLegendItems(),
     );
   }
 
-  Widget _buildColorBar(double width) {
+  List<Widget> _buildLegendItems() {
+    final colors = mode == IntensityLegendMode.eew ? _colors.reversed.toList() : _colors;
+    final labels = _labels.reversed.toList();
+
     if (mode == IntensityLegendMode.eew) {
-      // EEW mode: discrete color blocks
-      return ClipRRect(
-        borderRadius: BorderRadius.circular(4),
-        child: SizedBox(
-          height: 8,
-          width: width,
-          child: Row(
-            children: _colors.map((color) {
-              return Expanded(child: Container(color: color));
-            }).toList(),
-          ),
-        ),
-      );
+      return List.generate(colors.length, (index) {
+        return Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Container(
+              height: 12,
+              width: 16,
+              color: colors[index],
+            ),
+            const SizedBox(width: 6),
+            Text(
+              labels[index],
+              style: const TextStyle(fontSize: 10, height: 1),
+            ),
+          ],
+        );
+      });
     } else {
-      // RTS mode: gradient
-      return Container(
-        height: 8,
-        width: width,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(4),
-          gradient: LinearGradient(colors: _colors),
-        ),
-      );
-    }
-  }
+      final labelWidgets = labels.map((label) {
+        return Expanded(
+          child: Text(
+            label,
+            style: const TextStyle(fontSize: 9, height: 1),
+            textAlign: TextAlign.left,
+          ),
+        );
+      }).toList();
 
-  Widget _buildLabels(double width) {
-    if (mode == IntensityLegendMode.eew) {
-      // EEW mode: labels centered under each color block
-      return SizedBox(
-        width: width,
-        child: Row(
-          children: _labels.map((label) {
-            return Expanded(
-              child: Text(
-                label,
-                style: const TextStyle(fontSize: 9),
-                textAlign: TextAlign.center,
+      return [
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container(
+              height: 12.0 * colors.length,
+              width: 16,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(4),
+                gradient: LinearGradient(
+                  colors: colors,
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                ),
               ),
-            );
-          }).toList(),
-        ),
-      );
-    } else {
-      // RTS mode: labels at edges
-      return SizedBox(
-        width: width,
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: _labels.map((label) {
-            return Text(
-              label,
-              style: const TextStyle(fontSize: 9),
-            );
-          }).toList(),
+            ),
+            const SizedBox(width: 6),
+            SizedBox(
+              height: 12.0 * colors.length,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: labelWidgets,
+              ),
+            ),
+          ],
         ),
-      );
+      ];
     }
   }
 }