fix chart margins

web/pages/components/chart.tsx

@@ -1,6 +1,6 @@
 import { LineChart } from 'react-chartkick'
 import styles from '../../styles/styles.module.css';
-import 'chart.js'
+import 'chart.js';
 
 const defaultProps = {
   active: false,
@@ -49,17 +49,18 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha
   });
 
   return (
-    <LineChart
+    <div className={styles.lineChartContainer}>
-    className={styles.lineChartContainer}
+      <LineChart
-    xtitle="Time"
+        xtitle="Time"
-    ytitle={title}
+        ytitle={title}
-    suffix={unit}
+        suffix={unit}
-    legend="bottom"
+        legend="bottom"
-    color={color}
+        color={color}
-    data={renderData}
+        data={renderData}
-    download={title}
+        download={title}
-    />
+      />
-  )
+    </div>
+  );
 }
 
 Chart.defaultProps = {

web/pages/hardware-info.tsx

@@ -100,9 +100,7 @@ const series = [
             />
           </Row>
 
-          <div className="chart-container">
+          <Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
-            <Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
-          </div>
         </div>
       </div>
     );

web/pages/viewer-info.tsx

@@ -120,9 +120,7 @@ export default function ViewersOverTime() {
           prefix={<UserOutlined />}
         />
       </Row>
-      <div className="chart-container">
+      <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
-        <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />
-      </div>
       <Table dataSource={clients} columns={columns} rowKey={(row) => row.userAgent} />
     </div>
   );

web/styles/globals.scss

@@ -35,10 +35,6 @@ pre {
   border-radius: .5em;
 }
 
-.recharts-wrapper {
-  font-size: 12px;
-}
-
 @media (prefers-color-scheme: dark) {
   @import "~antd/dist/antd.dark";
   pre {