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,8 +49,8 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha
   });
 
   return (
+    <div className={styles.lineChartContainer}>
       <LineChart
-    className={styles.lineChartContainer}
         xtitle="Time"
         ytitle={title}
         suffix={unit}
@@ -59,7 +59,8 @@ export default function Chart({ data, title, color, unit, dataCollections }: Cha
         data={renderData}
         download={title}
       />
-  )
+    </div>
+  );
 }
 
 Chart.defaultProps = {

web/pages/hardware-info.tsx

@@ -100,10 +100,8 @@ const series = [
             />
           </Row>
 
-          <div className="chart-container">
           <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="" />
-      </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 {