From 95e3a1d4c58cc9ed62c95abed933ddc7970bc8c6 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 19 Apr 2021 17:59:04 -0700
Subject: [PATCH] Fix layout of checkboxes in modals. Closes
 https://github.com/owncast/owncast/issues/945

---
 web/pages/access-tokens.tsx | 11 +++++++++--
 web/pages/webhooks.tsx      | 25 ++++++++++++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/web/pages/access-tokens.tsx b/web/pages/access-tokens.tsx
index 17ce502425..76c0e33e89 100644
--- a/web/pages/access-tokens.tsx
+++ b/web/pages/access-tokens.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
+import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip, Row, Col } from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
 
 import format from 'date-fns/format';
@@ -73,6 +73,9 @@ function NewTokenModal(props: Props) {
   function selectAll() {
     setSelectedScopes(Object.keys(availableScopes));
   }
+  const checkboxes = scopes.map(function (singleEvent) {
+    return (<Col span={8} key={singleEvent.value}><Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox></Col>)
+  });
 
   return (
     <Modal
@@ -94,7 +97,11 @@ function NewTokenModal(props: Props) {
         Select the permissions this access token will have. It cannot be edited after it&apos;s
         created.
       </p>
-      <Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} />
+      <Checkbox.Group style={{ width: '100%' }} value={selectedScopes} onChange={onChange}>
+        <Row>
+          {checkboxes}
+        </Row>
+      </Checkbox.Group>
 
       <p>
         <Button type="primary" onClick={selectAll}>
diff --git a/web/pages/webhooks.tsx b/web/pages/webhooks.tsx
index c3b59b869e..2e94b4d5d7 100644
--- a/web/pages/webhooks.tsx
+++ b/web/pages/webhooks.tsx
@@ -1,5 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd';
+import {
+  Table,
+  Tag,
+  Space,
+  Button,
+  Modal,
+  Checkbox,
+  Input,
+  Typography,
+  Tooltip,
+  Row,
+  Col,
+} from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
 import isValidUrl from '../utils/urls';
 
@@ -73,6 +85,10 @@ function NewWebhookModal(props: Props) {
     disabled: selectedEvents?.length === 0 || !isValidUrl(webhookUrl),
   };
 
+  const checkboxes = events.map(function (singleEvent) {
+    return (<Col span={8} key={singleEvent.value}><Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox></Col>)
+  });
+
   return (
     <Modal
       title="Create New Webhook"
@@ -90,8 +106,11 @@ function NewWebhookModal(props: Props) {
       </div>
 
       <p>Select the events that will be sent to this webhook.</p>
-      <Checkbox.Group options={events} value={selectedEvents} onChange={onChange} />
-
+      <Checkbox.Group style={{ width: '100%' }} value={selectedEvents} onChange={onChange}>
+        <Row>
+          {checkboxes}
+        </Row>
+      </Checkbox.Group>
       <p>
         <Button type="primary" onClick={selectAll}>
           Select all