Progress on making EnergyManagementView responsive.

lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart

@@ -40,34 +40,70 @@ class _AnalyticsEnergyManagementViewState
         );
   }
 
+  static const _padding = EdgeInsetsDirectional.all(32);
+
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return LayoutBuilder(
-      padding: const EdgeInsetsDirectional.all(32),
+      builder: (context, constraints) {
-      child: Row(
+        final isMediumOrLess = constraints.maxWidth <= 900;
-        spacing: 20,
+        if (isMediumOrLess) {
-        children: [
+          return SingleChildScrollView(
-          const Expanded(
+            padding: _padding,
-            flex: 2,
             child: Column(
-              spacing: 20,
+              spacing: 32,
               children: [
-                Expanded(child: TotalEnergyConsumptionChartBox()),
+                SizedBox(
-                Expanded(child: EnergyConsumptionPerDeviceChartBox()),
+                  height: MediaQuery.of(context).size.height * 0.9,
+                  child: Container(
+                    decoration: subSectionContainerDecoration.copyWith(
+                      borderRadius: BorderRadius.circular(30),
+                    ),
+                    padding: const EdgeInsetsDirectional.all(32),
+                    child: const PowerClampEnergyDataWidget(),
+                  ),
+                ),
+                SizedBox(
+                  height: MediaQuery.of(context).size.height * 0.5,
+                  child: const TotalEnergyConsumptionChartBox(),
+                ),
+                SizedBox(
+                  height: MediaQuery.of(context).size.height * 0.5,
+                  child: const EnergyConsumptionPerDeviceChartBox(),
+                ),
               ],
             ),
-          ),
+          );
-          Expanded(
+        }
-            child: Container(
+
-              decoration: subSectionContainerDecoration.copyWith(
+        return Padding(
-                borderRadius: BorderRadius.circular(30),
+          padding: _padding,
+          child: Row(
+            spacing: 32,
+            children: [
+              const Expanded(
+                flex: 2,
+                child: Column(
+                  spacing: 20,
+                  children: [
+                    Expanded(child: TotalEnergyConsumptionChartBox()),
+                    Expanded(child: EnergyConsumptionPerDeviceChartBox()),
+                  ],
+                ),
               ),
-              padding: const EdgeInsetsDirectional.all(32),
+              Expanded(
-              child: const PowerClampEnergyDataWidget(),
+                child: Container(
-            ),
+                  decoration: subSectionContainerDecoration.copyWith(
+                    borderRadius: BorderRadius.circular(30),
+                  ),
+                  padding: const EdgeInsetsDirectional.all(32),
+                  child: const PowerClampEnergyDataWidget(),
+                ),
+              ),
+            ],
           ),
-        ],
+        );
-      ),
+      },
     );
   }
 }

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart

@@ -21,7 +21,16 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
           Row(
             spacing: 32,
             children: [
-              ChartTitle(title: Text('Energy Consumption per Device')),
+              Expanded(
+                flex: 3,
+                child: FittedBox(
+                  fit: BoxFit.scaleDown,
+                  alignment: AlignmentDirectional.centerStart,
+                  child: ChartTitle(
+                    title: Text('Energy Consumption per Device'),
+                  ),
+                ),
+              ),
               Spacer(),
               Expanded(flex: 2, child: EnergyConsumptionPerDeviceDevicesList()),
             ],

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart

@@ -13,13 +13,17 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisAlignment: MainAxisAlignment.end,
-        children: List.generate(20, (index) => _buildDeviceCell(index)).toList(),
+        children: List.generate(
+          20,
+          (index) => _buildDeviceCell(context, index),
+        ).toList(),
       ),
     );
   }
 
-  Widget _buildDeviceCell(int index) {
+  Widget _buildDeviceCell(BuildContext context, int index) {
     return Container(
+      height: MediaQuery.sizeOf(context).height * 0.035,
       padding: const EdgeInsetsDirectional.symmetric(
         vertical: 8,
         horizontal: 12,
@@ -31,23 +35,27 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
           width: 1,
         ),
       ),
-      child: Row(
+      child: FittedBox(
-        spacing: 6,
+        fit: BoxFit.scaleDown,
-        children: [
+        alignment: Alignment.center,
-          const CircleAvatar(
+        child: Row(
-            radius: 4,
+          spacing: 6,
-            backgroundColor: Colors.purple,
+          children: [
-          ),
+            const CircleAvatar(
-          Text(
+              radius: 4,
-            'Device ${index + 1}',
+              backgroundColor: Colors.purple,
-            textAlign: TextAlign.center,
-            style: const TextStyle(
-              color: ColorsManager.blackColor,
-              fontWeight: FontWeight.w400,
-              fontSize: 14,
             ),
-          ),
+            Text(
-        ],
+              'Device ${index + 1}',
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                color: ColorsManager.blackColor,
+                fontWeight: FontWeight.w400,
+                fontSize: 14,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart

@@ -73,16 +73,29 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: [
-        SelectableText(
+        Expanded(
-          'Smart Power Clamp',
+          flex: 2,
-          style: context.textTheme.headlineSmall?.copyWith(
+          child: FittedBox(
-            fontWeight: FontWeight.w700,
+            fit: BoxFit.scaleDown,
-            color: ColorsManager.vividBlue.withValues(alpha: 0.6),
+            alignment: AlignmentDirectional.centerStart,
-            fontSize: 18,
+            child: SelectableText(
+              'Smart Power Clamp',
+              style: context.textTheme.headlineSmall?.copyWith(
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.vividBlue.withValues(alpha: 0.6),
+                fontSize: 18,
+              ),
+            ),
           ),
         ),
         const Spacer(),
-        const PowerClampEnergyDataDeviceDropdown(),
+        const Expanded(
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: AlignmentDirectional.centerEnd,
+            child: PowerClampEnergyDataDeviceDropdown(),
+          ),
+        ),
       ],
     );
   }

lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart

@@ -20,7 +20,19 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
           spacing: 20,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const ChartTitle(title: Text('Total Energy Consumption')),
+            const Row(
+              children: [
+                Expanded(
+                  flex: 3,
+                  child: FittedBox(
+                    alignment: AlignmentDirectional.centerStart,
+                    fit: BoxFit.scaleDown,
+                    child: ChartTitle(title: Text('Total Energy Consumption')),
+                  ),
+                ),
+                Spacer(flex: 4),
+              ],
+            ),
             const Divider(),
             TotalEnergyConsumptionChart(chartData: state.chartData),
           ],