- 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>
+    </>
   );
 }

web/pages/viewer-info.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Table, Row, Typography } from 'antd';
+import { Table, Row, Col, Typography } from 'antd';
 import { formatDistanceToNow } from 'date-fns';
 import { UserOutlined } from '@ant-design/icons';
 import { SortOrder } from 'antd/lib/table/interface';
@@ -99,22 +99,28 @@ export default function ViewersOverTime() {
       <br />
       <Row gutter={[16, 16]} justify="space-around">
         {online && (
+          <Col span={8} md={8}>
+            <StatisticItem
+              title="Current viewers"
+              value={viewerCount.toString()}
+              prefix={<UserOutlined />}
+            />
+          </Col>
+        )}
+        <Col md={online ? 8 : 12}>
           <StatisticItem
-            title="Current viewers"
-            value={viewerCount.toString()}
+            title={online ? 'Max viewers this session' : 'Max viewers last session'}
+            value={sessionPeakViewerCount.toString()}
             prefix={<UserOutlined />}
           />
-        )}
-        <StatisticItem
-          title={online ? 'Max viewers this session' : 'Max viewers last session'}
-          value={sessionPeakViewerCount.toString()}
-          prefix={<UserOutlined />}
-        />
-        <StatisticItem
-          title="All-time max viewers"
-          value={overallPeakViewerCount.toString()}
-          prefix={<UserOutlined />}
-        />
+        </Col>
+        <Col md={online ? 8 : 12}>
+          <StatisticItem
+            title="All-time max viewers"
+            value={overallPeakViewerCount.toString()}
+            prefix={<UserOutlined />}
+          />
+        </Col>
       </Row>
 
       <Chart title="Viewers" data={viewerInfo} color="#2087E2" unit="" />