- add <Col>s to areas with <Row>s for consitency

- give main content a fixed width so really wide forms dont look that funny
- fix to make markdown editor preview text black to address https://github.com/owncast/owncast/issues/726

web/pages/hardware-info.tsx

@@ -1,5 +1,5 @@
 import { BulbOutlined, LaptopOutlined, SaveOutlined } from '@ant-design/icons';
-import { Row, Typography } from 'antd';
+import { Row, Col, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../utils/apis';
 import Chart from '../components/chart';
@@ -67,39 +67,45 @@ export default function HardwareInfo() {
   ];
 
   return (
-    <div>
+    <>
       <Typography.Title>Hardware Info</Typography.Title>
       <br />
       <div>
         <Row gutter={[16, 16]} justify="space-around">
-          <StatisticItem
-            title={series[0].name}
-            value={`${currentCPUUsage}`}
-            prefix={<LaptopOutlined style={{ color: series[0].color }} />}
-            color={series[0].color}
-            progress
-            centered
-          />
-          <StatisticItem
-            title={series[1].name}
-            value={`${currentRamUsage}`}
-            prefix={<BulbOutlined style={{ color: series[1].color }} />}
-            color={series[1].color}
-            progress
-            centered
-          />
-          <StatisticItem
-            title={series[2].name}
-            value={`${currentDiskUsage}`}
-            prefix={<SaveOutlined style={{ color: series[2].color }} />}
-            color={series[2].color}
-            progress
-            centered
-          />
+          <Col>
+            <StatisticItem
+              title={series[0].name}
+              value={`${currentCPUUsage}`}
+              prefix={<LaptopOutlined style={{ color: series[0].color }} />}
+              color={series[0].color}
+              progress
+              centered
+            />
+          </Col>
+          <Col>
+            <StatisticItem
+              title={series[1].name}
+              value={`${currentRamUsage}`}
+              prefix={<BulbOutlined style={{ color: series[1].color }} />}
+              color={series[1].color}
+              progress
+              centered
+            />
+          </Col>
+          <Col>
+            <StatisticItem
+              title={series[2].name}
+              value={`${currentDiskUsage}`}
+              prefix={<SaveOutlined style={{ color: series[2].color }} />}
+              color={series[2].color}
+              progress
+              centered
+            />
+          </Col>
         </Row>
 
         <Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
       </div>
-    </div>
+    </>
   );
 }