fix react warnings on config page

web/pages/components/key-value-table.tsx

@@ -17,9 +17,9 @@ export default function KeyValueTable({ title, data }) {
   ];
 
   return (
-    <div>
-      <Title>{title}</Title>
-      <Table pagination={false} columns={columns} dataSource={data} />
-    </div>
+    <>
+      <Title level={2}>{title}</Title>
+      <Table pagination={false} columns={columns} dataSource={data} rowKey="name" />
+    </>
   );
 }

web/pages/index.tsx

@@ -8,9 +8,7 @@ Will display an overview with the following datasources:
 TODO: Link each overview value to the sub-page that focuses on it.
 
 GW: to do:
-- Hardware + Viewer count views-  top 3 boxes - restyle
 - Home  - more box shadoe?
-- maybe not have "current stream" nav section
 - maybe make outbound/inbound smaller (since it's fixed info for current stream)
 - reformat "Inbound Video Stream" section.
 */
@@ -31,9 +29,6 @@ import {
 } from "../utils/apis";
 import { formatIPAddress, isEmptyObject } from "../utils/format";
 
-const { Title } = Typography;
-
-
 export default function Home() {
   const serverStatusData = useContext(ServerStatusContext);
   const { broadcaster, serverConfig: configData } = serverStatusData || {};

web/pages/update-server-config.tsx

@@ -4,6 +4,7 @@ import { Table, Typography, Input } from 'antd';
 import { isEmptyObject } from '../utils/format';
 import KeyValueTable from "./components/key-value-table";
 import { ServerStatusContext } from '../utils/server-status-context';
+import adminStyles from '../styles/styles.module.css';
 
 const { Title } = Typography;
 const { TextArea } = Input;
@@ -32,12 +33,13 @@ function SocialHandles({ config }) {
   }
 
     return (
-      <div>
-        <Title>Social Handles</Title>
+      <div className={adminStyles.configSection}>
+        <Title level={2}>Social Handles</Title>
         <Table
           pagination={false}
           columns={columns}
           dataSource={config.instanceDetails.socialHandles}
+          rowKey="platform"
         />
       </div>
     );
@@ -98,12 +100,12 @@ function InstanceDetails({ config }) {
 
   return (
     <>
-    <p>
-      <KeyValueTable title="Server details" data={data} />
-    </p>
-    <p>
-      <KeyValueTable title="Server configuration" data={configData} />
-    </p>
+      <div className={adminStyles.configSection}>
+        <KeyValueTable title="Server details" data={data} />
+      </div>
+      <div className={adminStyles.configSection}>
+        <KeyValueTable title="Server configuration" data={configData} />
+      </div>
     </>
   );
 }
@@ -113,8 +115,8 @@ function PageContent({ config }) {
     return null;
   }
   return (
-    <div>
-      <Title>Page content</Title>
+    <div className={adminStyles.configSection}>
+      <Title level={2}>Page content</Title>
       <TextArea
         disabled rows={4}
         value={config.instanceDetails.extraPageContent}
@@ -128,17 +130,13 @@ export default function ServerConfig() {
   const { serverConfig: config } = serverStatusData || {};
 
   return (
-    <div>
-      <p>
-        <InstanceDetails config={config} />
-        </p>
-        <p>
-        <SocialHandles config={config} />
-        </p>
-        <PageContent config={config} />
-        <br/>
-        <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
-    </div>
+    <>
+      <InstanceDetails config={config} />
+      <SocialHandles config={config} />
+      <PageContent config={config} />
+      
+      <Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
+    </>
   ); 
 }
 

web/styles/styles.module.css

@@ -81,4 +81,8 @@
 
 .lineChartContainer {
   margin: 2em auto;
+}
+
+.configSection {
+  margin-bottom: 2em;
 }