Show account and historical usage charts side by side

Author: NessieCanCode

src/slurmcostmanager.css

@@ -186,3 +186,16 @@ nav button:hover {
 .pagination {
   margin-top: 0.5em;
 }
+
+/* Layout for side-by-side summary charts */
+.summary-charts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  margin-top: 1em;
+}
+
+.summary-chart {
+  flex: 1;
+  min-width: 300px;
+}

src/slurmcostmanager.js

@@ -692,10 +692,22 @@ function Summary({ summary, details = [], daily = [], monthly = [], yearly = []
           })
       })
     ),
-    React.createElement('h3', null, 'CPU/GPU-hrs per Slurm account'),
-    React.createElement(AccountsChart, { details }),
-    React.createElement('h3', null, historicalLabel),
-    React.createElement(HistoricalUsageChart, { data: historical })
+    React.createElement(
+      'div',
+      { className: 'summary-charts' },
+      React.createElement(
+        'div',
+        { className: 'summary-chart' },
+        React.createElement('h3', null, 'CPU/GPU-hrs per Slurm account'),
+        React.createElement(AccountsChart, { details })
+      ),
+      React.createElement(
+        'div',
+        { className: 'summary-chart' },
+        React.createElement('h3', null, historicalLabel),
+        React.createElement(HistoricalUsageChart, { data: historical })
+      )
+    )
   );
 }