- 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/docs/README.md

@@ -4,7 +4,7 @@
 - Give your page or form a title. Feel free to use Ant Design's `<Title>` component.
 - Give your form a description inside of a `<p className="description" />` tag.
 
-- Use some Ant Design `Row` and `Col`'s to layout your forms if you want to spread them out into responsive columns.
+- Use some Ant Design `Row` and `Col`'s to layout your forms if you want to spread them out into responsive columns.  If you use an `<Row>`s, be sure to use `<Col>`s with them too!
 
 - Use the `form-module` CSS class if you want to add a visual separation to a grouping of items.
   

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="" />

web/styles/home.scss

@@ -1,6 +1,4 @@
 .home-container {
-  max-width: 1000px;
-
   .online-status-section {
     margin-bottom: 1em;
     .online-details-card {

web/styles/main-layout.scss

@@ -49,6 +49,9 @@
 
   .main-content-container {
     padding: 2em 3em 3em;
+    max-width: 1024px;
+    min-width: 50vw;
+    margin: auto;
   }
 
   .footer-container {

web/styles/markdown-editor.scss

@@ -32,6 +32,8 @@
 
   // Custom CSS for formatting the preview text
   .markdown-editor-preview-pane {
+    color: var(--black-75);
+
     a {
       color: var(--owncast-purple);
     }
@@ -49,7 +51,6 @@
   }
 
 
-
   // Set the background color of the editor text input
   textarea {
     background-color: var(--gray) !important;